Manipulating parent's array prop - Reactjs

Question

This question may sound a little complicated. But i am stuck here, so i am throwing it here.

I am rendering a child component multiple times in parent with different properties and an array.

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.

Child:

{
  this.props.xarray.map((heading, index) => {
    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 <option value={heading.headingis} key={index} selected disabled={heading.disabled}>{heading.headingis}</option>
    }else{

        return <option value={heading.headingis} key={index} disabled={heading.disabled}>{heading.headingis}</option>
    }

  })
}

Parent's actionis function:

handlerHeading(index, disabled) {
   xarray[index]['disabled'] = disabled;
}

It's working somehow BUT problem is

If first component is rendered, it will disable that value
Then 2nd component is rendered, it will disable that value along with previous one.

and so on...

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...

But i want if one value is disabled in component 6, it should get disabled in all previous components.

Have a look at following images for example. Component #1 Rendered:

Component #4 Rendered:

score 0 · Accepted Answer · answered Sep 22 '17 at 06:05

I have resolved this, by changing xarray to state of parent. This:

state = {xarray: xarray}

And:

handlerHeading(index, disabled) {
   xarray[index]['disabled'] = disabled;
   this.setState({ xarray: xarray });
}

For some reason you cannot change Props as you desire. See This Question

Manipulating parent's array prop - Reactjs

1 Answers1