title: React - Proper way to render dynamic content?
body: <p>I want to make a modal view has dynamic content by injecting a component to it.</p>
  
  <pre><code>class RootView extends Component {
      state = {
          modalBody: null
      }
  
      setModalBody = (body) =&gt; {
          this.setState({modalBody: body})
      }
  
      render() {
          return(&lt;ContextProvider value={this.setModalBody}&gt;&lt;Modal&gt;{this.state.modalBody}&lt;/Modal&gt;&lt;/ContextProvider&gt;)
      }
  }
  </code></pre>
  
  <p>Then inside any children view i use <code>setState</code> to change parent <code>modalBody</code></p>
  
  <p>The <code>modalBody</code> can be setted on each route, which means the <code>modalBody</code> can be <code>input</code> list, <code>selection</code> list or text only. So the <code>modalBody</code> must have its state for controlling these inputs.</p>
  
  <p>By this way, it renders ok, but the dynamic content couldn't be updated after state changed. The parent's dynamic content couldn't receive the ChildView new state, i have to <code>setModalBody</code> again and again after it rerendered.</p>
  
  <p>For example, if input in modalBody has changed, the parent couldn't be updated.</p>
  
  <pre><code>class ChildView extends Component {
      state = {
          inputValue: null
      }
  
      handleChange = (e) =&gt; {
          this.setState({inputValue: e.target.value})
      }
  
  
      setModalBody(body) {
          this.props.context.setModalBody(&lt;input value={this.state.inputValue} onChange={this.handleChange} /&gt;)
      }
  
      render() {
          return(&lt;Modal&gt;{this.state.modalBody}&lt;/Modal&gt;)
      }
  }
  </code></pre>
  
  <p>Full code: <a href="https://codesandbox.io/s/lp5p20mx1m" rel="nofollow noreferrer">https://codesandbox.io/s/lp5p20mx1m</a>
  Any proper way to render dynamic content to parent?</p>