Bug when reordering React component list

Question

I have a component that loads a list of components <ComponenteReordenavel> which is reordered according to the user’s taste. The bug happens when I modify the style of that component and reorder again, the style always stays on the component of the position in which it was modified and not on the component that I applied the style.

Threshing

After debugging the application I realized that the error happens because React only updates the content when I reorder the list. I need to know if the only way to solve this problem is to modify the value of the object when reorder the list and when to render the component again apply a certain css according to a value defined in the object.

Programmable

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import FontAwesome from 'react-fontawesome';
import { Panel } from 'react-bootstrap';
import StrongLabel from '../StrongLabel/StrongLabel';
import PostBet from '../PostBet/PostBet';
import {Col} from 'react-bootstrap';

class ComponenteReordenavel extends Component {

  constructor(props){
    super(props);
    this.state = {
      isRotated: false,
      chevronStyle:{
        transform: 'rotate(180deg)'
      }
    }
    this.rotateElement    = this.rotateElement.bind(this);
  }

  componentDidMount() {
    ReactDOM.findDOMNode(this.refs.chevron).addEventListener('click', this.rotateElement);
  }

  componentWillUnmount() {
  }

  createPostBet(post, index){
    return <Col key={index} xs={6} md={4}><PostBet nameTime={post.name} valueBet={post.value}></PostBet></Col>;
  }

  createPostBets(posts){
    return posts.map((i, index) => this.createPostBet(i, index));
  }

  rotateElement(){
    this.setState({
      isRotated: !this.state.isRotated,
    });
  }

  render() {
    return (
      <div className="Bet">
        <div className="HeaderBet">
          <FontAwesome style={this.state.isRotated ? this.state.chevronStyle : {} } ref='chevron' name="chevron-down"/>
          <StrongLabel name={this.props.source.description}></StrongLabel>
          <FontAwesome name="arrows-v" onClick={this.props.onClick}/>
        </div>
        <div className="ListBets">
          <Panel collapsible expanded={!this.state.isRotated}>
                {this.createPostBets(this.props.source.bet)}
          </Panel>
        </div>
      </div>
    );
  }
}

export default ComponenteReordenavel;

Answer 1

Two problems that may be responsible for the bug.

You’re using the index as key. React uses the key to perform its updating algorithm DOM as efficiently as possible.

If you change a position component by changing its key, since the index becomes another React understands that the first component has been changed, but does not understand that it is in the third position now.

To key must always be a unique value and identifier of the resource, independent of the order in which it is. In your case the post.name would be more efficient than the index.

Also don’t use ref string. It’s bad practice. Always use callback.

References:

• https://facebook.github.io/react/docs/refs-and-the-dom.html
• https://facebook.github.io/react/docs/lists-and-keys.html