React updating prop and rendering based on boolean value

Viewed 198

I have a parent function component which has a boolean (which is set via child component and also used to render some container on parent component).

Is the below setup fine in terms of updating and dynamic rendering based on isSomeBoolean?

const [isSomeBoolean, setisSomeBoolean] = useState(true);    
const updateIsSomeBoolean = (boolVal) => {
    setisSomeBoolean(boolVal);
}


<ChildComp updateIsSomeBoolean={updateIsSomeBoolean} /> 
  
{isSomeBoolean && (
    <div className="container">
    ....
    </div>
)
}

In the child component, somewhere I invoke the parent function as below;

props.updateIsSomeBoolean(false);
1 Answers

Yes, Passing state and controller function to the child component is very normal in react.

But always keep in mind that changing state in parent component will render both components so keep the state near to component where is it required.

In your scenario, you're going in the right direction.

Related