Is there a way to make two sibling components have asynchronous knowledge of a state in ReactJS?

Question

I have two components: NavBar, and SignUp.

In my SignUp component, I keep track of whether a user is currently logged in or not via a state variable.

Depending on the above state variable from SignUp, my NavBar component should change (ex. the "sign in" icon should change to "sign out").

Two Questions:

1. How can my NavBar have knowledge of the state of SignUp?

2. How can they both be in sync, changing dynamically, depending on the state of SignUp?

Any help is greatly appreciated! Thanks.

Answer 1

Passing a prop to Navbar from SignUp's JSX (ie: <NavBar myProp={123}/>), as you would add an attribute, will cause NavBar to automatically update when it changes.

Check out React's official docs for more info on passing props.