My goal: Click a button in a child component and have that component removed.
New to React. In my app.js I have a component and a prop within that component:
<IntroSteps isHidden={false} />
In the <IntroSteps> component I have logic to listen for the isHidden Prop
export default function IntroSteps({isHidden}) {
if(isHidden) {
return null
}
return ( <div> content </div> )
}
My goal is to be able to update isHidden within the IntroSteps component. I've attempted the following with no luck. What is the correct way to do this?
const removeIntroSteps = () => {
isHidden = true
};
Props are immutable So I'm afraid you might not be able to change it in the child component. I'd rather do it this way: In app.js
const [isHidden, setIsHidden] = useState[false];
const updateHidden =() =>{
setIsHidden(!isHidden) //true or false
}
<IntroSteps isHidden={isHidden} updateHidden={updateHidden} />
Then in the child component,
simply call updateHidden wherever required.
In a comment you've clarified:
want to be able to click a button within the child component and have it removed from the dom
The best way to do that is to have the child component call a function that the parent passes it, and have the parent either render the child (not hidden) or not render it (hidden) (or alternatively, render it with the isHidden flag and the child component can return null when isHidden is true, but that seems round-about).
Quick example:
const { useState } = React;
const Child = ({hide}) => {
return <div>
I'm the child <input type="button" onClick={hide} value="Hide Me" />
</div>;
};
const Example = () => {
const [childHidden, setChildHidden] = useState(false);
const hideChild = () => setChildHidden(true);
return <div>
{childHidden ? null : <Child hide={hideChild} />}
</div>;
};
ReactDOM.render(<Example />, document.getElementById("root"));<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>While you can add state to the child component that lets it maintain a separate flag (hiddenMyself for instance, then return null if either isHidden or hiddenMyself is true), you can't directly change the state of the isHidden prop. That's something the parent component controls, not the child.
Props are read-only, so you can't.
You need to pass a function to your component which is responsible for updating the state of isHidden.
In the IntroSteps, you need to add this for example:
const toggleIsHidden => setIsHidden(!isHidden);
<IntroSteps isHidden={false} toggleIsHidden={toggleIsHidden} />
Then, in your component:
export default function IntroSteps({isHidden, toggleIsHidden}) {
// use toggleIsHidden function as you need
if(isHidden) {
return null
}
return ( <div> content </div> )
}