TicTacMan Posts - Answer Overflow

TicTacMan

•Created by TicTacMan on 10/27/2023 in #support

Testing conditional rendering in child component

Hi, I am trying to test a particular interaction in my component. I have two components, let's call them Parent and Toast. Toast is a child of the Parent component. Below is a code snippet from the Toast component:

imports...

interface Props {}
export const [toastVisibility, setToastVisibility] = createSignal(false);

const handleCloseToast = () => {
    setToastVisibility(false);
};

const Toast: Component<Props> = (props) => {
    const derivedSignal = () => {
        if (toastVisibility()) {
            // Test is able to reach this line
            console.log("SHOULD BE SHOWING TOAST NOW.............."); 
            console.log("toastVisibility: ", toastVisibility());
            // After button click, the signal is True
            return toastVisibility();
        }
        console.log("toastType: ", toastType);
        return toastVisibility();
    };
    return (
        <Show when={derivedSignal()} fallback={<>not showing toast</>}>
            TOAST SHOWING
        </Show>
    );
};

export default Toast;

imports...

interface Props {}
export const [toastVisibility, setToastVisibility] = createSignal(false);

const handleCloseToast = () => {
    setToastVisibility(false);
};

const Toast: Component<Props> = (props) => {
    const derivedSignal = () => {
        if (toastVisibility()) {
            // Test is able to reach this line
            console.log("SHOULD BE SHOWING TOAST NOW.............."); 
            console.log("toastVisibility: ", toastVisibility());
            // After button click, the signal is True
            return toastVisibility();
        }
        console.log("toastType: ", toastType);
        return toastVisibility();
    };
    return (
        <Show when={derivedSignal()} fallback={<>not showing toast</>}>
            TOAST SHOWING
        </Show>
    );
};

export default Toast;

The Parent component has a button that fires an API call. If there is an error in sending the API call, the signal that controls the visibility of the Toast component is set to True

try {
  const res = await fireApiCall("/dummy/api") // This method throws an error if status code is not 200
  ...
}
catch (error: unknown) {
            if (error instanceof Error) {          
                // Code reaches this line     
                console.log("SETTING TOAST VISIBILITY TO TRUE");  
                setToastVisibility(true);
            } else {
                throw error;
            }
        }

try {
  const res = await fireApiCall("/dummy/api") // This method throws an error if status code is not 200
  ...
}
catch (error: unknown) {
            if (error instanceof Error) {          
                // Code reaches this line     
                console.log("SETTING TOAST VISIBILITY TO TRUE");  
                setToastVisibility(true);
            } else {
                throw error;
            }
        }

The problem Im facing is that the code inside the <Show> does not seem to re-render and Im not sure why. I also console.log the value of toastVisibility and I can confirm that its initially set to false and after clicking the button, its set to true

8 replies

SSolidJS

•Created by TicTacMan on 9/6/2023 in #support

Detect which dependency changed when using "on" utility with createEffect

Hi, I have the code below:

    createEffect(
        on(
            () => {
                triggerFields.forEach((_trigger) => dataStore[_trigger]);
            },
            () => {
                console.log("EFFECT CALLED");
               // print the name of the triggerField or property 
              // of dataStore which changed and caused this effect to run
            },
            { defer: true }
        )
    );

    createEffect(
        on(
            () => {
                triggerFields.forEach((_trigger) => dataStore[_trigger]);
            },
            () => {
                console.log("EFFECT CALLED");
               // print the name of the triggerField or property 
              // of dataStore which changed and caused this effect to run
            },
            { defer: true }
        )
    );

I have a store called dataStore which is an object with 50+ properties. I have a string array called triggerFields which correspond to the property names in dataStore. I want this effect to only run when the trigger fields change. So far I have managed to get this to work by simple accessing the particular properties (i.e the string values in TriggerFields) of dataStore. However now inside my effect, I actually want to figure out which of my triggerField was responsible for the effect to run. Any ideas on how I can accomplish this?

3 replies

SSolidJS

•Created by TicTacMan on 9/5/2023 in #support

Is it possible to subscribe to particular properties in a object wrapped by a store?

I have a usecase in which I have an object with say 100+ properties. I have some function which I would like to execute only when property 52 changes. Is it possible to do something like this?

    const someFunction = () => {
        if (props.data["property52"]) {
            // do something...
        } else {
            // do nothing
        }
    }

    const someFunction = () => {
        if (props.data["property52"]) {
            // do something...
        } else {
            // do nothing
        }
    }

Will this function only trigger whenever the value of property52 updates? Or when any value of the data object changes?

10 replies

SSolidJS

•Created by TicTacMan on 9/1/2023 in #support

Is it possible to pass paramters a function wrapped by a createEffect/createMemo?

,I have a certain function in my component which I have noticed runs multiple times since I am referencing the function multiple times in my JSX. I found that the recommended way to alleviate this problem is to wrap the function in a createMemo. However my function requires some parameters which are passed to it through its calling context. So is there any way I can pass parameters to a function wrapped by a useEffect or useMemo?

2 replies

SSolidJS

•Created by TicTacMan on 8/31/2023 in #support

Is it possible to untrack writes to a signal?

I have a certain use case, in which I have a function called getTextBoxValue which needs to run at a particular time. The way I control the execution of this function is by using a boolean signal called IsTriggerFieldChanged like a flag. So I set the value of this flag to be true, to execute my function. The problem is that within the function, I need to reset the value of the flag back to false for it to work a second time. However when I set the flag to false, it triggers a re-execution of my function (IsTriggerFieldChanged) which undoes the calculated value Input field which controls the function execution: https://pastebin.com/yhqyAUh9 The function that Im trying to run based on the flag: https://pastebin.com/PAxTtZ1Q

12 replies

Gaming

Programming