title: Reordering list items by onclick with ReactJs
body: <p><strong>Learning ReactJs, i would implement this by using the best practise. Please anyone add another feature or comment with your solutions.</strong></p>
  
  <p>I'm trying to build a reorder list items component by clicking on a set of up/down buttons. </p>
  
  <p>1) How can i show all the props component values and his bgColor? </p>
  
  <p>2) For handling the events I should have to use the constructor and inside add onClickUp() &amp; onClickDown() methods? </p>
  
  <p><strong>FruitList Component:</strong> </p>
  
  <pre><code>class FruitList extends Component {
  
     constructor(props) {
        super(props);
        this.state = { // set new state for bind key items
           items : [
             {'id': 1, 'name': 'orange', 'bgColor': '#f9cb9c'},
             {'id': 2, 'name': 'lemon','bgColor' : '#fee599'},
             {'id': 3, 'name': 'strawberry', 'bgColor': '#e06666'},
             {'id': 4, 'name': 'apple', 'bgColor' : '#b6d7a7'}
           ]
        }
     }
  
     onMoveUp = (key) =&gt; {
        if(key === 0) return; // disable method when the key its equal to 0 
        const { items } = this.props; // assign props to items for don't repeat my self 
        const index = key - 1;  // save in memory index value less than one
        const itemAbove = items[index]; // save in memory items index  
        items[key - 1] = items[key]; // match id value with the key object
        items[key] = itemAbove; 
        this.setState({ items }); // set new state 
     }
  
     onMoveDown = (key) =&gt; {
        const { items } = this.props;
        if(key === items.length - 1) return;
        const index = key + 1;
        const itemBelow = items[index];
        items[key + 1] = items[key];
        items[key] = itemBelow;
        this.setState({ items });
     }
  
     render() {
        const { items } = this.state;
  
        return (
           &lt;ul&gt;
             {items.map((item, key) =&gt;
                 &lt;li key={key} style={{ backgroundColor: item.bgColor }}&gt;
                    &lt;div className="fruitsId"&gt;{ key + 1 }&lt;/div&gt;
                    &lt;div className="fruitsName"&gt;{ item.name }&lt;/div&gt;
                    &lt;div className="fruitsArrows"&gt;
                       &lt;span onClick={() =&gt; this.onMoveUp(key)}&gt;&amp;#x25B2;&lt;/span&gt;
                       &lt;span onClick={() =&gt; this.onMoveDown(key)}&gt;&amp;#x25BC;&lt;/span&gt;
                    &lt;/div&gt;
                 &lt;/li&gt;
              )}
           &lt;/ul&gt;
        );
     }
  
  }
  </code></pre>
  
  <p><strong>App.js Component:</strong></p>
  
  <pre><code>class App extends Component {
  
     constructor(props) {
        super(props);
        this.state = {
           fruitList : [
             {'id': 1, 'name': 'orange', 'bgColor': '#f9cb9c'},
             {'id': 2, 'name': 'lemon','bgColor' : '#fee599'},
             {'id': 3, 'name': 'strawberry', 'bgColor': '#e06666'},
             {'id': 4, 'name': 'apple', 'bgColor' : '#b6d7a7'}
           ]         
        }
     }
  
     render() {
        return (
           &lt;FruitList items={this.state.fruitList} /&gt;
        );
     }
  
  }
  
  ReactDOM.render(&lt;App /&gt;, document.body);
  </code></pre>
  
  <p><a href="https://codesandbox.io/embed/m412zk7r68" rel="nofollow noreferrer">SandBox Demo</a></p>