React es6 es2015 modal popup

Question

I\'m very new to React and ES6. I\'m building a small application using React and I\'m following ES6 standard. Now I need to open a modal window on a button click.

Answer 1

I've put together an example to illustrate how you might go about this, making use of the parent/child relationship and passing down a callback.

The scenario is basically:

• There is a parent component
• It can show a component
• controls whether the is open or not
• passes its child, , a callback to "closeModal"

See this JSBin example for the full solution in action: http://jsbin.com/cokola/edit?js,output

And a visual summary:

is just a "dumb" component. It does not "control" whether it is open or not. This is up to the parent . The parent informs it of how to close itself via passing down a callback this.props.closeModal

class Modal extends React.Component {
  render() {
    const { closeModal } = this.props;

    return (
      

        
Some Modal
        Close Modal
      
    )
  }
}

is aware of the open/closed state and controls its child,

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      modalOpen: false
    };
  }

  _openModal() {
    this.setState({modalOpen: true});
  }

  _closeModal() {
    this.setState({modalOpen: false});
  }

  render() {
    const { modalOpen } = this.state;

    return (
      

        Open Modal

        {/* Only show Modal when "this.state.modalOpen === true" */}
        {modalOpen 
          ? 
          : ''}
      
    );
  }
}