How to re-render a parent from a children component with hook?

Question

I would like to force my parent to re-render the page when I click on a button from a child component. (I don't use redux because I don't have the time to learn it in my project, so I use localStorage. Unfortunately React don't see when a change is operated on local Storage, so he don't re-render. It's why I would like to force it to re-render my page (to have the right content).)

I tried to use hook with the function useState to do it but it's not working and I don't know why... (Nothing change in my page)

This is my parent page: (just the code important)

const[reload, setReload] = useState(false);
...
else if (user) { contents = [<Message_UserIdentified user={user} callBack={setReload}/>, contentform]; }

This is my child component:

const Message_UserIdentified = (props) => {
    let user = props.user;
    return (
        <Alert color="primary" className="alert alert-dismissible alert-info">
            <h4>Welcome {!user ? "" : user.firstname} {!user ? "" : user.lastname}</h4>
            If you are not {!user  ? "" : user.firstname} click <a onClick={() => {localStorage.removeItem('idUser'); props.callBack(true);}}>here.</a>
        </Alert>
    );
}

Why my parent page don't want re-render ? Thanks in advance.

Answer 1

I have created a proof of concept of what you are trying to achieve and it works:

https://codesandbox.io/s/weathered-smoke-ojr5j

probably there's something else in your code that we can't see that's preventing the component to re render