title: Manipulating parent's array prop - Reactjs
body: <p>This question may sound a little complicated. But i am stuck here, so i am throwing it here.</p>
  
  <p>I am rendering a child component multiple times in parent with different properties and an array. </p>
  
  <p>Parent contains an array of headings, i am passing it to child components and mapping select options with that array. If an heading is selected from any of the child components, that heading should display as disabled in other child components.</p>
  
  <p>Child:</p>
  
  <pre><code>{
    this.props.xarray.map((heading, index) =&gt; {
      if (heading.headingis.toLowerCase().indexOf(this.state.field) != -1) {
        this.setcheckstate(); //ignore this function
        this.props.actionis(index, 'disabled');  //Using this function (passed from parent) to disable selected option
        return &lt;option value={heading.headingis} key={index} selected disabled={heading.disabled}&gt;{heading.headingis}&lt;/option&gt;
      }else{
  
          return &lt;option value={heading.headingis} key={index} disabled={heading.disabled}&gt;{heading.headingis}&lt;/option&gt;
      }
  
    })
  }
  </code></pre>
  
  <p>Parent's actionis function:</p>
  
  <pre><code>handlerHeading(index, disabled) {
     xarray[index]['disabled'] = disabled;
  }
  </code></pre>
  
  <p>It's working somehow <strong>BUT problem is</strong> </p>
  
  <ul>
  <li>If first component is rendered, it will disable that value </li>
  <li>Then 2nd component is rendered, it will disable that value
  along with previous one.</li>
  </ul>
  
  <p>and so on...</p>
  
  <p>But in first component, only one value is disabled, in 2nd component 2 values are disabled and in 3rd component 3 values are disabled. And so on...</p>
  
  <p><strong>But i want if one value is disabled in component 6, it should get disabled in all previous components.</strong></p>
  
  <p>Have a look at following images for example. 
  Component #1 Rendered:</p>
  
  <p><a href="https://i.stack.imgur.com/tzGY6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tzGY6.png" alt="enter image description here"></a> </p>
  
  <p>Component #4 Rendered:</p>
  
  <p><a href="https://i.stack.imgur.com/kWnyK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kWnyK.png" alt="enter image description here"></a></p>