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

358
Views
How to use React-Bootstrap Modal

I am new to React and I want to use React-Bootstrap Modal. This code works very well but what I want to do is instead of having a button inside Trigger component, I want it in another parent component so I can call Trigger component from a button in a parent component.

let Button = ReactBootstrap.Button;
let Modal = ReactBootstrap.Modal;

class Trigger extends React.Component{
    constructor(props){
        super(props);
        this.state = { show: false };
    }
    render(){
        let close = () => this.setState({ show: false});
        return (
      <div className="modal-container" style={{height: 1000}}>
        <Button
          bsStyle="primary"
          bsSize="large"
          onClick={() => this.setState({ show: true})}
        >
          Launch contained modal
        </Button>

        <Modal
          show={this.state.show}
          onHide={close}
          container={this}
          aria-labelledby="contained-modal-title"
        >
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title">Edit Recipe</Modal.Title>
          </Modal.Header>
          <Modal.Body>
                 <form className="form-group">
                     <label>Recipe</label>
                     <input type='text' className="form-control"/>
                     <label>Ingredients</label>
                     <textarea type='text' className="form-control"/>
                 </form>
          </Modal.Body>
          <Modal.Footer>
                <Button bsStyle="primary">Edit Recipe</Button>
            <Button onClick={close}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
    }
}
over 4 years ago · Santiago Trujillo
1 answers
Answer question

0

On observing your code, one can find that the Modal get's launched onClick of the Button. The corresponding state change in the component is it's state's show property.

I have made the following jsFiddle to show how you can control the modal externally.

https://jsfiddle.net/sunnykgupta/5qrzt9uy/

In a gist, we accept a prop into the component and listen to prop changes (via. componentWillReceiveProps()). Internally, we maintain a state to track modal show status.

Code:

let Button = ReactBootstrap.Button;
let Modal = ReactBootstrap.Modal;

class Trigger extends React.Component{
    constructor(props){
        super(props);
        this.state = { show: props.modal };
    }
    componentWillReceiveProps(nextProps){
        if(this.state.show!==nextProps.modal){
        this.setState({show: nextProps.modal})
      }
    }
    render(){
        let close = () => this.setState({ show: false});
        return (
      <div className="modal-container">
        <Modal
          show={this.state.show}
          onHide={close}
          container={this}
          aria-labelledby="contained-modal-title"
        >
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title">Edit Recipe</Modal.Title>
          </Modal.Header>
          <Modal.Body>
                 <form className="form-group">
                     <label>Recipe</label>
                     <input type='text' className="form-control"/>
                     <label>Ingredients</label>
                     <textarea type='text' className="form-control"/>
                 </form>
          </Modal.Body>
          <Modal.Footer>
                <Button bsStyle="primary">Edit Recipe</Button>
            <Button onClick={close}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
    }
}

class Parent extends React.Component{
    constructor(props){
    super(props);
    this.state = {show: false}
  }
    render(){
    return <main>
      <Trigger modal={this.state.show}/>
      <Button
        bsStyle="primary"
        bsSize="large"
        onClick={() => this.setState({ show: true})}
        >
        Launch contained modal
      </Button>
    </main>
  }
}

ReactDOM.render(
  <Parent/>,
  document.getElementById('container')
);
over 4 years ago · Santiago Trujillo 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!