How can I change the value of parent's prop using click event?

Question

I was trying to use the componentWillUnmount functionality of React and to change the value of a prop from a child component by click event. I think I am willing to use the "lift the state up" and want to use the componentWillUnmount property of React.


export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state={
      show:true
    }
  }
  render() {
    const toggleDisplay=()=>{
      this.setState({show:!this.state.show});
    }
    return (
      <div className="App">
        {this.show&&<ChildrenUnmounting onclickfun={toggleDisplay} />}
      </div>
    );
  }
}
class ChildrenUnmounting extends React.Component {
  constructor(props) {
    super(props);
    alert("constructor is called!");
    this.state={
      onclickfun:props.onclickfun,
    }
    alert("constructor is called!");
  }

  render() {
    return (
      <>
        {alert("render is called!")}

        <h1>This content is shown!</h1>
        <button onClick={this.state.onclickfun}>
          Toggle View
        </button>
      </>
    );
  }

  componentWillUnmount() {
    alert("componentWillUnmount is called!");
  }
}

I have added an answer down below. I'm not sure what you mean by wanting to use `componentWillUnmount` property of React. It's unnecessary here if your goal is to just update the `show` state variable. — Abdulrahman Ali, May 16 '23 at 17:17
Please see [ask] and take the [tour], then revise your post title to ask a clear, specific question. — isherwood, May 16 '23 at 18:27

Abdulrahman Ali · Answer 1 · 2023-05-16T20:20:47.617

You're not properly passing down the state setter down to the child component. Instead, you're setting it to a state value/variable.

Here how the code should be:

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      show: true
    }
  }

  const toggleDisplay = () => {
    this.setState({ show:!this.state.show });
  }

  render() {
    return (
      <div className="App">
        {this.state.show && <ChildrenUnmounting onclickfun={toggleDisplay} />}
      </div>
    );
  }
}

class ChildrenUnmounting extends React.Component {
  constructor(props) {
    super(props);
    alert("constructor is called!");
  }

  render() {
    return (
      <>
        {alert("render is called!")}

        <h1>This content is shown!</h1>
        <button onClick={this.props.onclickfun}>
          Toggle View
        </button>
      </>
    );
  }

  componentWillUnmount() {
    alert("componentWillUnmount is called!");
  }
}

score 0 · Answer 2 · answered May 16 '23 at 17:51

In your Appcomponent's render() method, you are using this.show instead of this.state.show. Update the line

{this.show&&<ChildrenUnmounting onclickfun={toggleDisplay} />}

to

{this.state.show && <ChildrenUnmounting onclickfun={toggleDisplay} />}.

With this change, the show state property will be properly referenced in the render() method and the child component will be shown or hidden based on its value.

score 0 · Answer 3 · answered May 16 '23 at 18:25

In your App component's return function, the condition has an incorrect variable (this.show in place of this.state.show). Because of that, you are facing such issue.

Current Code:

{this.show && <ChildrenUnmounting onclickfun={toggleDisplay} />}
/*^^^^^^^*/

Update Like This:

{this.state.show && <ChildrenUnmounting onclickfun={toggleDisplay} />}
/*^^^^^^^^^^^^^*/

How can I change the value of parent's prop using click event?

3 Answers3