How do I dynamically change the content of a React Bootstrap modal?

Question

I'm trying to change the content of the modal after it has mounted, but I'm not able to find the correct nodes to change. I've attached refs to the nodes I'm interested in and try to alter them in componentDidMount(). But the nodes are not found -- comes up as null.

 var Modal = ReactBootstrap.Modal; const MyModal = React.createClass({ getInitialState() { return { showModal: false }; }, close() { this.setState({ showModal: false }); }, open() { this.setState({ showModal: true }); }, componentDidMount() { var theNode = ReactDOM.findDOMNode(this.refs.bigPic); var theOtherNode = ReactDOM.findDOMNode(this.refs.bigPicInfo); theNode.src = 'http://big-pic.png'; theOtherNode.innerHTML = "<strong> Something here</strong>"; }, render() { return ( <div> <Modal show={this.state.showModal} onHide={this.close}> <Modal.Header closeButton> <Modal.Title></Modal.Title> </Modal.Header> <Modal.Body> <div><img ref="bigPic" src="" /></div> </Modal.Body> <Modal.Footer> <p ref="bigPicInfo"></p> </Modal.Footer> </Modal> </div> ); } }); ReactDOM.render(<MyModal/>, document.getElementById("my-modal")); 

Answer 1

Dynamic content in React is driven by component state, the same way you're using this.state.showModal to dynamically make the modal appear or not. Anything that can possibly change should have a default setting in getInitialState , then call this.setState() with your new values.. this will trigger your component to re-render.

const MyModal = React.createClass({

  getInitialState() {
    return { 
      showModal: false,
      bigPicSrc: '',
      infoContent: ''
    }
  },

  ...

  componentDidMount() {
    this.setState({ 
      bigPicSrc: 'http://big-pic.png'
      infoContent: <strong>Something here</strong> // not a string, but a component
    })
  },

  render() {
    return (
      <Modal show={this.state.showModal} onHide={this.close}>
        <Modal.Header closeButton>
          <Modal.Title></Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div><img ref="bigPic" src={this.state.bigPicSrc} /></div>
        </Modal.Body>
        <Modal.Footer>
          <p ref="bigPicInfo">{this.state.infoContent}</p>
        </Modal.Footer>
      </Modal>
    )
  }
})

Answer 2

I use node and react 16, before I was learn little more of Bootstrap, and now collecting my knowledge about bout react and bootstrap. On next away I make modal: First I am put CDN links with Bootstrap css and js, and jquery from index.html from public folder. Next make folder for components from SRC folder of ny app. Next step I put bootstrap code from new file example modal.js and change bootstrap class from clssName in React. And modal worked Klick on this text for show modal

. And think for change content of modal must use data some data of Json file there You must connect id field of Json data and ref or id tigger event with you calling this modal. Ever different event calling Id field from data.json. I thing for that is best use switch case for easy choose.