React: dynamic rendering of a component based on state

Question

I have a Parent(blue box with three buttons) and a Child(red box that shows content) component, that render some text based on the Child's state. Basically, the rendered view is this:

The Child component:

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tab: this.props.tab
    }
  }
  render() {
    let text;

    if (this.props.tab === '1') {
      text = <div>text 1 </div>
    } else if (this.props.tab === '2') { 
      text = <div>text 2 </div>
    } else if (this.props.tab === '3') {
      text = <div>text 3 </div>
    }
  return (
    <div>
      {text}
    </div>
    );
  } 
}

export default Child;

The Parent component:

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tab: null
    }
    this.onOneClik = this.onOneClik.bind(this);
    this.onTwoClik = this.onTwoClik.bind(this);
    this.onThreeClick = this.onThreeClick.bind(this);
  }
  onOneClik(e) {
    this.setState({ tab: '1' });
  }
  onTwoClik(e) {
    this.setState({ tab: '2' });
  }
  onThreeClick(e) {
    this.setState({ tab: '3' });
  }
  render() {
    return (
      <div>
        <button type="button" onClick={this.onOneClik}>1</button>
        <button type="button" onClick={this.onTwoClik}>2</button>
        <button type="button" onClick={this.onThreeClik}>3</button>
      </div>
      <div>
        <Child tab={this.state.tab} />
      </div>
    );
  }
}

The issue is that I need to re-render the Child when the button is clicked, but the Child shows only the content of the button which was clicked first, even though the state of the Parent updates itself when different buttons are clicked.

What would be the way to dynamically render the Child without involving Links? I guess redux could help, but I'm not sure on how to wrap redux around this.

Tholle · Accepted Answer · 2018-07-13 02:35:29Z

2

A component will be re-rendered when its state or props changes. Instead of storing the initial tab prop in the state of the Child component, you can use the prop directly instead (you also have a few typos that are fixed below).

Example

class Child extends React.Component {
  render() {
    let text;

    if (this.props.tab === "1") {
      text = <div> text 1 </div>;
    } else if (this.props.tab === "2") {
      text = <div> text 2 </div>;
    } else if (this.props.tab === "3") {
      text = <div> text 3 </div>;
    }

    return <div>{text}</div>;
  }
}

class Parent extends React.Component {
  state = {
    tab: null
  };

  onOneClick = e => {
    this.setState({ tab: "1" });
  };
  onTwoClick = e => {
    this.setState({ tab: "2" });
  };
  onThreeClick = e => {
    this.setState({ tab: "3" });
  };

  render() {
    return (
      <div>
        <button type="button" onClick={this.onOneClick}>
          1
        </button>
        <button type="button" onClick={this.onTwoClick}>
          2
        </button>
        <button type="button" onClick={this.onThreeClick}>
          3
        </button>
        <Child tab={this.state.tab} />
      </div>
    );
  }
}


ReactDOM.render(<Parent />, document.getElementById('root'));

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

<div id="root"></div>

edited Jul 13, 2018 at 2:35

answered Jul 13, 2018 at 2:12

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tholle Over a year ago

@Ruham You're welcome! Yeah, it's tempting to put props in state, but most of the time you really don't have to.

Cadoiz Over a year ago

What are the advantages of using unpkg.com ?

Collectives™ on Stack Overflow

React: dynamic rendering of a component based on state

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related