Component is not re rendering after state change in react

Question

While working on my project I faced this issue and tried for two days to solve it. Finally I decided to post it here. I am rendering array by calling child component as follows:-
Parent component

{this.state.list.map((item,index)=>{
    return <RenderList 
        insert={this.insert.bind(this,index)}
        index={index}
        length={this.state.list.length}
        EnterPressed={this.childEnterPressed.bind(this,index)} 
        list={item} 
        onchange={this.childChange.bind(this)} 
        editable={this.state.editable[index]} 
        key={index} 
        onclick={this.tagClicked.bind(this,index)} />
})}

and

Child component

<Draggable grid={[37, 37]} 
            onStop={this.handleDrop.bind(this)} 
            axis="y" 
            onDrag={this.handleDrag.bind(this)} 
            bounds={{top: -100, left: 0, right: 0, bottom: 100}}
>
    <div onClick={this.tagClicked.bind(this)}>
        { this.props.editable ? (<Input 
                                        type="text"
                                        label="Edit Item"
                                        id="listItem"
                                        name="listItem"
                                        onKeyPress={this.handleKeyPress.bind(this)}
                                        defaultValue={this.props.list}
                                        onChange={this.onChange.bind(this)} />) : 
                                    (<Chip>{this.props.list}</Chip>) }
        </div>
</Draggable>  

I am using react-draggble to make each individual item of my list draggble. When ot is dragged in handleDrag function I am just updating my state of distance by which component is draged and in handleDrop function I am calling insert function which delete the dragged item from its current position and insert at position where it is dropped.

insert=function(index,y,e){
    if(y!==0){
        var list=this.state.list;
        var editable = Array(this.state.editable.length).fill(false);
        if(y/37>0){
            var temp=list[index];
            var i=0;
            for(i=index;i<index+y/37;i++){
                list[i]=this.state.list[i+1];
            }
            list[(y/37)+index]=temp;
            this.setState({
                ...this.state,
                list:list,
                editable:editable
            })
        }
    } 

State is updating correctly. I have tested it but component is not re rendering. what surprised me is that if I just display the list in the same component then it re render correctly.any help is appreciated!

Answer 1

React cannot keep track of the items, as your are using the index as key (which is discouraged ). Try to create a unique key based on something like a generated uuid which sticks to the item.

When dragging an item, the position (index) in the array changes. This prevents React from syncing the correct elements. Prop/state changes may not propagate as wanted.