Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

113
Views
React Updating Prop In Child

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
};
about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report

0

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.

about 4 years ago · Juan Pablo Isaza Report

0

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> ) 
}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!