react-fun | React Fun - | Frontend Framework library

you can use this approach to check whether any property exist in the json or it should be stored in the address:

For the second part of your question relating to why the value of render.current might be updating twice rather than once it might be because you are using React.StrictMode in your index.jsx file. Removing StrictMode did seem to fix the issue in this example. Also check out this link for more info.

As for the first issue, it seems that on clicking the re-render button neithr of the child components (First or Second) re-render. However, when we swap them not only do they re-render but the components are also unmounted and then re-mounted. You can see this behaviour in the above example, as well. Providing unique keys for both components seems to fix this issue. I'm also a beginner at React and not entirely sure of what's happening behind the scenes, however this is what I have gathered so far based on the documentation: When react finds that a child (say the first child) has a different type compared to what the type was on the previous render (in our case the type switches between First and Second) it unmounts the child node and all of its children, then re-mounts them, then continues with the rendering process. This is supported by the console logs we can see int the above example. By including unqiue keys we let react know that despite components First and Second being in different locations they are the same component after all. So, react doesn't bump into a scenario where a child has swapped types.

As Brain mentioned: React determines if it should re-render or not based on the equality of previous props to the next props, and previous state to the next state. By mutating the original state array, the previous studentList has referential equality with the updated studentList and react will not detect that it needs to rerender.

So in order to change the list and to React detect the changes, the value of the array needs to be used (mutated), instead of its reference.

As Bergi hinted: alternative that copies the array by value

1. React.createRef is really only valid in class-based components. If used in a functional component body then the ref would be recreated each render cycle.
2. Don't use a DOM query selector to attach onClick listeners to DOM elements. These live outside react and you'd need to remember to clean them up (i.e. remove them) so you don't have a memory leak. Use React's onClick prop.
3. When the selectedElements are mapped you attach the same ref to each element, so the last one set is the one your UI gets.

1. Use React.useRef in the functional component body to store an array of react refs to attach to each element you want to scroll into view.
2. Attach the scrollSmoothHandler directly to each span's onClick prop.
3. Attach each ref from the ref array created in 1. to each mapped field set you want to scroll to.

Code

You have no need to create another array with checked items. Just change your input like-

In Material UI, you generally have to follow their recommendation for styling your components. One of which is to Override Style with classes prop

I forked your CodeSandbox and applied the fixes. You can find a working solution below.

https://codesandbox.io/s/react-functional-component-forked-gmwv0

There was quite a bit that needed to be changed, but I'll try to cover it as best as I can.

1. You were referencing this.setState in your handleCheckboxChange, which doesn't work in a functional component. In a functional component, you use the 2nd argument of your useState hook, which in this case is equal to setState. Functional components don't use this for any internal methods.
2. There was invalid syntax inside of your render function. You need to make sure you're always returning a JSX object with a single top level wrapping component.
3. The rest of the issues were inside of your handleCheckboxChange. Due to the asynchronous nature of setState, it is best to use the callback inside of setState which would be setState((prevState) => {}) which will make sure you don't have stale state. You'll also need to return an object from this which will be your new state.
4. I updated the value of the checkbox (checked) to use the selected value that you calculate within this function.
5. The final thing I did was update the mapping to properly return the correctly formatted state.

Final Solution

App.js

You can setup a useEffect hook to perform a side effect(redirect to "/") when state(userData) changes:

Replace: