React: dynamic rendering of a component based on state

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.