Update state from children component - reactjs

Question

Take a look at the app. There is a list of buttons. It's really hard for me to explain the issue to you guys so take a look at the app yourself and consider this as a challenge. It's really a small app to demonstrate an issue that I am facing while working with react. This is not a basic stuff...
https://codesandbox.io/s/cranky-faraday-bxufk?file=/src/App.js
When clicking on the button, it is expected that the boolean next to it turn to false. It seems basic to you at first but when you take a look at the code, this is not easy to achieve. My real application is more complicated so I make a simple version of it just to demonstrate the issue
Expect:
Click on button 1 => boolean next to it turns to false
Click on button 2 => boolean next to it turns to false
Click on button 3 => boolean next to it turns to false
Reality:
Click on button 1 => screen goes blank

Answer 1

So, This is another way to solve this problem.
But first of all I will pin-down the problem in existing code, and try to explain why it is not working.
I had placed two console.log in App.js one is in useEffect() and another just before the return statement:
export default function App() {
const [state, setState] = React.useState([]);
// Set pannels state
React.useEffect(() => {
console.log("useEffect executing");
setState(
data.map((item) => ({
id: item.id,
isSaved: true,
content: <Button id={item.id} handleButton={handleButton} />
}))
);
}, []);
const handleButton = (id) => {
....
....
}
console.log("App Rendering");
return (
<div className="App">
<button onClick={handleClick}>Try this</button>
{state ? <Tab pannels={state} /> : null}
</div>
);
}
And below is the console after execution:
Now it is clearly can be seen that when you are executing setState inside useEffect the state value is an empty array []. Because first render cycle of App is already completed and call to useState initialized state to empty array.
In useEffect you are assigning property content as:
...
content: <Button id={item.id} handleButton={handleButton} />
...
Now if you closely observe {handleButton} is an function bound to the first render of 'App' (which is of course a function in itself) and {handleButton} has access to const state in it's parent scope, which is an empty array [] in first render cycle of 'App';
Thus you are in the middle of pushing the {handleButton} in state which has still a value [] (empty array), while useEffect is executing.
As soon as setState completes inside useEffect another render cycle for App is executed (due to local state update react re-renders the component). A new instances of App and all of it's nested members are created, except the state and setState which are managed by the react.
After this second render of App your state now contains the reference of old instance of {handleButton} (where you assign property content to Button) of previous render of App thus these {handleButton} still have state value as [] (empty array closures).
Now when you click any of the Button it's onClick is bound to the old reference of handleButton which has state value as empty array, and thus when {handleButton} finishes execution it calls setState (function provided by react framework, not affected by re-render) it once again sets the state to an empty array. And you eventually get you buttons disappeared.
Now to solve this, you need to rebind new instance of {handleButton} each time a re-render happens for App. You can not memoize {handleButton} because it depends on the state. Thus you can delegate rendering of Button component to Tab which re-renders itself after every state update.
So you can do something like this:
App.js
export default function App() {
const [state, setState] = React.useState([]);
// Set pannels state
React.useEffect(() => {
setState(
data.map((item) => ({
id: item.id,
isSaved: true
}))
);
}, []);
const handleButton = (id) => {
console.log("On button click: ", id);
console.log(state);
//Update isSaved of a corresponding button to false
const updatedState = [...state];
const updatedIndex = updatedState.findIndex((item) => item.id === id);
updatedState[updatedIndex] = {
...updatedState[updatedIndex],
isSaved: false
};
setState(updatedState);
};
return (
<div className="App">
<button onClick={() => handleButton(2)}>Try this</button>
{state ? <Tab pannels={state} handleButton={handleButton} /> : null}
</div>
);
}
Note: I have even used the same event handler handleButton for try this button too, to show that the same function instance works well if used on the component itself or passed to children.
Tab.js
const Tab = ({ pannels, handleButton }) => {
return (
<div>
List of pannels
{pannels.map((item) => (
<div key={item.id}>
<Button id={item.id} handleButton={handleButton} />
<span>{item.isSaved ? "true" : "false"}</span>
</div>
))}
</div>
);
};
codesandbox reference: https://codesandbox.io/s/zen-pascal-o6ify
Thanks

Answer 2

The problem in your code is related to state update. The handle button need to handle state as:
const handleButton = (id) => {
console.log("On button click: ", id);
setState((state) => {
// Update isSaved of a corresponding button to false
const updatedState = [...state];
const updatedIndex = updatedState.findIndex((item) => item.id === id);
updatedState[updatedIndex] = {
...updatedState[updatedIndex],
isSaved: false
};
return updatedState;
});
};
The solution is actually in the setState variant which uses a callback like setState((latestState) => {// do something }) and guarantees to give latest state for every execution.
Thanks for giving a beautiful problem to solve.