title: Initialize state with dynamic key based on props in reactJS
body: <p>How to initialize state with dynamic key based on props? The props is a data fetched from external source (async). So the props will change when the data is succesfully downloaded. Consider a component like this. </p>
  
  <p>edit: I want to make the state dynamic because I want to generate a dialog (pop up) based on the item that is clicked. the <code>DialogContainer</code> is basically that. <code>visible</code> prop will make that dialog visible, while <code>onHide</code> prop will hide that dialog. I use <a href="https://react-md.mlaursen.com/components/dialogs" rel="nofollow noreferrer">react-md library</a>.</p>
  
  <pre><code>class SomeComponent extends React.Component {
    constructor() {
      super();
      this.state = {};
      // the key and value will be dynamically generated, with a loop on the props
      // something like:
      for (const item of this.props.data) {
        this.state[`dialog-visible-${this.props.item.id}`] = false}
      }
    }
  
    show(id) {
      this.setState({ [`dialog-visible-${id}`]: true });
    }
  
    hide(id) {
      this.setState({ [`dialog-visible-${id}`]: false });
    }
  
    render() {
      return (
        &lt;div&gt;
          {this.props.data.map((item) =&gt; {
            return (
              &lt;div&gt;
                &lt;div key={item.id} onClick={this.show(item.id)}&gt;
                  &lt;h2&gt; Show Dialog on item-{item.id}&lt;/h2&gt;
                &lt;/div&gt;
                &lt;DialogContainer
                  visible={this.state[`dialog-visible-${item.id}`]}
                  onHide={this.hide(item.id)}
                &gt;
                  &lt;div&gt;
                    &lt;h1&gt; A Dialog that will pop up &lt;/h1&gt;
                  &lt;/div&gt;
                &lt;/DialogContainer&gt;
              &lt;/div&gt;
            );
          })}
        &lt;/div&gt;
      )
    }
  }
  
  // the data is fetched by other component.
  class OtherComponent extends React.Component {
    componentDidMount() {
      // fetchData come from redux container (mapDispatchToProps)
      this.props.fetchData('https://someUrlToFetchJSONData/')
    }
  }
  </code></pre>
  
  <p>The data then is shared via Redux.</p>
  
  <p>However, based on my understanding so far, state can be updated based on props with <code>componentWillReceiveProps</code> or the new <code>getDerivedStateFromProps</code> (not on the constructor as above). But, how to do that on either method? </p>
  
  <p>The example <a href="https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props" rel="nofollow noreferrer">here</a> only explains when the state is initialized on the constructor, and call <code>setState</code> on either cWRP or gDSFP. But, I want the key value pair to be initialized dynamically.</p>
  
  <p>Any help/hint will be greatly appreciated. Please do tell if my question is not clear enough.</p>