title: React.js: How do you change the position of a Component item
body: <p>How do you change the position of a Component item in React? </p>
  
  <p>Unless I've misunderstood it, React orders list items by <code>key</code>, which is represented in the DOM by <code>data-reactid</code>, but I don't know how to modify the <code>key</code> of components on the page.</p>
  
  <p>i.e. How do you grab the component, change it's <code>key</code>, and then fire a render so that the reordered list renders in the order you've set?</p>
  
  <p>e.g. in the following code example, when the <code>Click me</code> link is clicked, the first list item would be swapped with the last list item.</p>
  
  <p>Ideally, this functionality would allow you to dynamically reorder/relocate any component on the page without changing the order of components in the <code>render</code> method.</p>
  
  <p>Here is a link to the repo where the full project is located: <a href="https://github.com/bengrunfeld/gae-react-flux-todos" rel="nofollow">https://github.com/bengrunfeld/gae-react-flux-todos</a></p>
  
  <pre><code>var TodoBox = React.createClass({
    render: function(){
      return (
        &lt;div className="todo-container"&gt;
          &lt;h4&gt;GAE React Flux Todos&lt;/h4&gt;
          &lt;TodoList data={this.state.data} /&gt;
        &lt;/div&gt;
      )
    }
  });
  
  var TodoList = React.createClass({
    changePosition: function(e){
      // Change position of list item (e.g. to top/certain position/end of list)
    },
    render:function(){
      var todoNodes = this.props.data.map(function(todo) {
        return (
          &lt;Todo key={todo.id} id={todo.id}&gt;
            {todo.todoText}
          &lt;/Todo&gt;
        );
      });
      return (
        &lt;form className="todoList"&gt;
          {todoNodes}
          &lt;a onClick={this.changePosition}&gt;Click me&lt;/a&gt;
        &lt;/form&gt;
      )
    }
  });
  
  var Todo = React.createClass({
    render:function(){
      return (
        &lt;div className="todoItem"&gt;
          &lt;input type="text" className={this.props.id} onChange={this.checkInput} defaultValue={this.props.children} ref="todoItem"/&gt;
        &lt;/div&gt;
      )
    }
  });
  </code></pre>