problem when adding new item to start of array in react

Question

I'm facing a wired issue when adding a new item to the start of the array

checkout the example

class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {arr: [{title: 3}, {title: 2}, {title: 1}]};
    }

    render() {
        return <div>
            {
                this.state.arr.map((item, index) => <Element title={item.title} isNew={item.isNew}
                                                             key={index}/>
                )}
            <button onClick={() => {
                const arr = [...this.state.arr];
                const newItem = this.state.arr.length + 1;
                arr.unshift({title: newItem, isNew: true});
                this.setState({arr: arr});
            }}>ADD ELEMENT TO START
            </button>
        </div>
    }
}

class Element extends React.Component {

    constructor(props) {
        super(props);
        console.log('constructor : ', this.props.title);
    }

    componentDidMount() {
        console.log('componentDidMount : ', this.props.title);
    }

    render() {
        return <span style={{padding : '0 8px' , color: this.props.isNew ? 'red' : 'black'}}>{this.props.title}</span>
    }

}

ReactDOM.render(<Demo/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id="root"></div>

checkout the log when adding a new item to the start of the array, it shows the props of the last item of the array, not the first (since we add the item to the start).

I'm changing the state as required, the rendering is correct but the constructor of the wrong component(the last component) gets called the same goes for componentDidMount.

the app will work perfectly when adding the item to the end of the array but not the opposite.

jabbany · Accepted Answer · 2019-06-17 17:33:12Z

2

It looks like a misuse of key in React.

Your <Element key={index} ... /> code uses the index of the state.arr array to key your items and React uses that key to figure out if anything has changed.

When you add an item to the start, the new item gets assigned the key 0, which already existed in the old item list, so React will notice no difference and not update the first 3 elements. On the fourth element, it will try to render the new element, but the 4th thing in the array is actually the last element of the original array.

Try indexing on the unique part of your object, e.g. the title or something, so React can correctly figure out when to update what.

answered Jun 17, 2019 at 17:33

jabbany

5291 gold badge5 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

problem when adding new item to start of array in react

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related