buscando consejos sobre cómo tener un botón que, cuando se haga clic, cambie la lista de elementos a la lista alfabética de elementos y vuelva a hacer clic nuevamente, y así sucesivamente. a partir de ahora, cuando hago clic en el botón, se mostrará la lista en orden alfabético, pero solo se muestra encima de la lista original que ya se muestra. no estoy muy seguro de adónde ir desde aquí
class MenuItems extends Component { state = { sortedItems: [] } handleclick = (item) => { this.props.deleteMenuItem(item.id); } menuSort = () => { const ogList = [...this.props.menuItems] let sortedList = ogList.sort((a, b) => a.name.localeCompare(b.name)); this.setState({sortedItems: sortedList}) }; render(){ return ( <div> <button onClick={this.menuSort}>filter a to z</button> {this.state.sortedItems.map((item) =>( <li class="list" key={item.id}> {item.name} <br></br> {item.body} <br></br> <img src={item.image}></img> <br></br> <button id={item.id} onClick={() => this.handleclick(item)}>delete </button> </li> ))} {this.props.menuItems.map((item) =>( <li class="list" key={item.id}> {item.name} <br></br> {item.body} <br></br> <img src={item.image}></img> <br></br> <button id={item.id} onClick={() => this.handleclick(item)}>delete </button> </li> ))} </div> ) } } export default connect(null, {deleteMenuItem})(MenuItems)```Pensó correctamente en mantener la versión ordenada en el estado. Pero debe instruir de alguna manera al componente para que represente la lista original o la ordenada.
Por lo tanto, podría agregar una bandera en el state para especificar cuál desea.
También puede configurar la lista ordenada en el evento del ciclo de vida del componenteDidMount y actualizarla cada vez que los elementos del menuItems cambien a través del evento del ciclo de vida del componentDidUpdate .
Entonces algo como
state = { sortedItems: [], showSorted: false }; toggleSort = () => { this.setState(({ showSorted }) => ({ showSorted: !showSorted })); }; updateSortedItems() { const sorted = [...this.props.menuItems].sort((a, b) => a.name.localeCompare(b.name) ); this.setState({ sortedItems: sorted }); } componentDidMount() { this.updateSortedItems(); } componentDidUpdate(prevProps) { if (this.props.menuItems !== prevProps.menuItems) { this.updateSortedItems(); } }y en tu método de renderizado
let itemsToShow = this.props.menuItems; if (this.state.showSorted) { itemsToShow = this.state.sortedItems; } y usa los itemsToShow cuando quieras mostrarlos
{itemsToShow.map((item) => (Ejemplo de trabajo completo en https://codesandbox.io/s/elated-heyrovsky-m3jvv