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

user_11925221 0
Viewed 6440

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.

reactjs
3 Answers

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

user_39567970

The reload state variable in your parent component is strictly local to it; the child can't see it.

I've been using React Hooks for about 2 months now. The learning curve, at times, has been steep but I'm now getting really proficient at it.

A companion technology to Hooks called Context API is perfect for your needs. It's what you should be using rather than local storage because both components can access it. Your child component would set the equivalent of reload in the Context to true and your parent would have a useEffect function that would have reload as a dependency. Thus, when reload is changed from false to true, the useEffect function in the parent would be fired and run the code you desire.

Early on, I very much benefitted from this video series: https://www.youtube.com/watch?v=6RhOzQciVwI&t=46s Watch the first few videos and you should quickly understand how to implement the Context API in your functional React components.

user_118389700

Your child component can have a prop which directly pass setReload to it.

However one common usage is that, setReload can be associated with an event, ex. onReload. You can pass a prop onReload to the child instead. 

  <Child onReload={() => { setReload() }} />

Inside onReload implementation, you can call setReload.

user_2880960
Related