Me pregunto cómo volver a ordenar un elemento de lista. Es como si tuviera una lista de elementos li y pusiera el último elemento en primer lugar, como si el índice de 10 se colocara en el índice de 0
React.render( <div> <li>1</li> <li>2</li> <li>3</li> <li>4</li> //When an event fires, this item would go up to the first index </div>, document.getElementById('example') );Según su comentario sobre la respuesta de Abdennour (necesita actualizar un elemento independientemente de su posición), no puede realizar dicha operación con una matriz de números simples, debe indexar sus valores:
class MyList extends Component { render() { return( <ul> {this.props.items.map((item ,key) => <li key={key}> {item}</li> )} </ul> ) } } class App extends React.Component{ constructor(props) { this.state= { listItems: [{id: 1, val: '1'}, {id: 2, val: '2'}, {id: 2, val: '2'}, {id: 3, val: '3'}] }; } reverse = () => { this.setState({ listItems: this.state.listItems.reverse() }); } // You can ignore this, simple put some random value somewhere // In your case this would be the function that changes the value of one of the items, should of course be NOT random changeRandom = () => { const index = Math.floor(Math.random() * this.state.listItems.length); const newList = this.state.listItems.slice(); newList[index] = Math.floor(Math.random() * 10).toString(); this.setState({ listItems: newList }) } render() { return ( <div> <div> <MyList items={this.state.listItems.map(item => item.val)} /> </div> <div> <button onClick={reverse}>Reverse</button> </div> <div> <button onClick={changeRandom}>Random Change</button> </div> </div> ) } }Entonces, supongo que tiene dos componentes de React: uno para la lista y el otro es el componente principal ( App ) que incluye la list y el botón para invertir la lista.
class MyList extends React.Component { render() { return( <ul> {this.props.items.map((item ,key) => <li key={key}> {item}</li> )} </ul> ) } } MyList.defaultProps= {items:[]}; class App extends React.Component{ state= { listItems: ['1', '2', '3', '4'] }; onClick(e) { e.preventDefault(); this.setState({ listItems: this.state.listItems.reverse() }); } render() { return ( <div> <div> <MyList items={this.state.listItems} /> </div> <div> <button onClick={this.onClick.bind(this)}>Reverse</button> </div> </div> ) } } ReactDOM.render(<App /> , document.getElementById('example')) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <section id="example" />