Deleting Stateful element from ReactJS array

Question

I am having issues with removing stateful elements in an React array. In the following example, if you click 'toggle' on the second element ('B'), you will see:

Entry id: 0 name: A Is Active Toggle Remove

Entry id: 1 name: B Is Not Active Toggle Remove

Entry id: 2 name: C Is Active Toggle Remove

If you now click 'Remove' on the first element ('A'):

Entry id: 0 name: B Is Active Toggle Remove

Entry id: 1 name: C Is Not Active Toggle Remove

B has changed, but all I wanted to do was delete A and not impact any other elements. I've got a key as per the docs, and have tried using a key with a string prefix but it didn't help.

Is there any way to do this without pushing state up to TestContainer? (In my real situation I have a lot of disparate elements with different types of states).

<div id="test"></div>

<script type="text/jsx">

  var TestLine = React.createClass({
      getInitialState: function() {
          return {active: true};
      },
      handleLineRemove: function(e) {
        this.props.processLineRemove(this.props.id);
      },
      toggleActive: function(e) {
        this.setState({active: !this.state.active};
      },
      render: function() {
        return (
          <p>
            Entry id: {this.props.id} name: {this.props.name}
            {this.state.active ? " Is Active " : " Is Not Active " }
            <a onClick={this.toggleActive}>Toggle</a>
            &nbsp;<a onClick={this.handleLineRemove}>Remove</a>
          </p>
        );
      }
    });

     var TestContainer = React.createClass({
        getInitialState: function() {
          return {data: {lines: ['A','B','C']}};
        },
        processLineRemove: function(index) {
              var new_lines = this.state.data.lines.slice(0);
              new_lines.splice(index,1);
              var newState = React.addons.update(this.state.data, {
                lines: {$set: new_lines}
              });
          this.setState({data: newState});
        },
        render: function() {
            var body =[];
            for (var i = 0; i < this.state.data.lines.length; i++) {
                body.push(<TestLine 
                          key={i}
                          id={i}
                          name={this.state.data.lines[i]}
                          processLineRemove={this.processLineRemove} />)
            }
            return (
                <div>{body}</div>
            );
        }
    });

React.render(<TestContainer />, document.getElementById('test'));
</script>

There always will need to be some centralized location that will need to be notified of the deletion. You could use an action/dispatcher to notify of the change and have it propagate back, but conceptually it's not much different from your existing implementation as shown. You'll need to notify whatever component or store owns the data. — WiredPrairie
– WiredPrairie, Commented Feb 15, 2015 at 12:53
Elements are getting deleted successfully via TestContainer which owns the array. However the remaining array elements are not re-rendered correctly; merely the name labels are being moved and the private state in TestLine is not 'moved over' to the new position in the array. — Ben Smith
– Ben Smith, Commented Feb 15, 2015 at 14:15
You're asking two questions then -- how to manage state without involving the TestContainer and how to re-render correctly. It looks like the answer should help you. — WiredPrairie
– WiredPrairie, Commented Feb 15, 2015 at 14:57

Brigand · Accepted Answer · 2015-02-16 00:57:39Z

1

When you have a list with arbitrary removals/insertions, you can't use index as a key. In this case, you could use the actual value because it isn't changed.

var body = this.state.data.map(function(x, i){
    return <TestLine 
        key={x}
        name={x}
        processLineRemove={this.processLineRemove.bind(null, i)} />
}.bind(this));

In more complicated case, you need an array of objects, and you assign a property with a unique value to each. Assuming state is [makeItem('A'), makeItem('B'), ...]:

function unique(){ return ++unique.i };
unique.i = 0;

function makeItem(text){ return {text: text, id: unique()}; };

var body = this.state.data.map(function(x, i){
    return <TestLine 
        key={x.id}
        name={x.text}
        processLineRemove={this.processLineRemove.bind(null, i)} />
}.bind(this));

answered Feb 16, 2015 at 0:57

Brigand

86.4k20 gold badges167 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:23:27Z

0

If you have a list of items and you know that items will be edited randomly, I would not create the keys like that. I would rather create keys that unique and will not overlap with other keys upon list change. A simple random key generator like this should suffice.

Why ? Lets go over each step.

First renders looks like this

Entry id: 0 name: A Is Active Toggle Remove

Entry id: 1 name: B Is Not Active Toggle Remove

Entry id: 2 name: C Is Active Toggle Remove

And second looks like this

Entry id: 0 name: B Is Not Active Toggle Remove

Entry id: 1 name: C Is Active Toggle Remove

Now it is React's time to take these two, and figure out what changed. It will compare the components and the keys.

It looks at the first element and understands that the "active" flag is set to true based on the key. So it will apply the same to the key 0 that is finds in the second render. So on and so forth for the remaining elements.

Thus if your keys do not overlap upon change you can avoid this issue. This is the only way AFAIK. Hope this helps.

Here is a DEMO explaining the above.

Courtesy

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Feb 15, 2015 at 14:14

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

2 Comments

Brigand Over a year ago

UUID solves the problem of many servers creating up to billions of uuids per second with nearly 0% chance of conflict. It's a bit overkill here.

phtrivier Over a year ago

@FakeRainBrigand would lodash.com/docs#uniqueId make more sense, for example (with a prefix ?)

Collectives™ on Stack Overflow

Deleting Stateful element from ReactJS array

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related