Tengo varias tarjetas de elementos en una página, quiero cambiar solo un botón específico de elemento/tarjeta " Add Favt" a "Remove Favt " cuando el usuario hace clic en el botón "Add Favt" . Pero en mi caso, todos los nombres de los botones de las tarjetas cambian cuando se hace clic en un solo botón de la tarjeta.
Aquí está mi enfoque:
const Listitem = ({ posts }) => { const [btn, setBtn] = useState('Add Favt'); var arr = []; const click = (index) => { arr.push(posts[index]); console.log(arr); localStorage.setItem('items', JSON.stringify({ arr })); if (btn === 'Add Favt') { setBtn('Remove Favt'); } else { setBtn('Add Favt'); } }; return ( <div className="fav-content"> <ul className="card"> {posts.map((item, index) => { console.log(item._id); return ( <li key={item._id}> <button onClick={() => click(index)}>{btn}</button> <div className="post"> <h1>Name: {item.name}</h1> <p>Bio: {item.bio}</p> <a href={item.link}>Link: {item.link}</a> </div> </li> ); })} </ul> </div> ); };¿Cómo resolver este problema?
Está utilizando la variable de estado btn para cada botón. establecer btn en el estado se reflejará en todos ellos. Haga un componente separado para esto.
<button onClick={() => click(index)}>{btn}</button> <div className="post"> <h1>Name: {item.name}</h1> <p>Bio: {item.bio}</p> <a href={item.link}>Link: {item.link}</a> </div>Mantener un estado local en un componente nuevo para el estado de un elemento individual.
Esta puede ser una posible solución para lograr el objetivo deseado.
Fragmento de código
Por favor, vea el fragmento en la página completa
const {useState} = React; const Listitem = ({posts, ...props}) => { // track whether each card is is favorite or not const [isFavorite, setIsFavorite] = useState({}); // when button clicked, flip card from favorite const handleClick = e => { const id = e.target.id; setIsFavorite(prev => ({ ...prev, [id]: !prev[id] })) }; return ( <div className="fav-content"> List of favorites: { posts .filter(({_id}) => [_id] in isFavorite && isFavorite[_id]) .map(({name}) => name) .join() } <ul className="card"> {posts.map(item => ( <li key={item._id}> <button id={item._id} onClick={handleClick} > { isFavorite[item._id] ? 'Remove Fav' : 'Add Fav' } {item.name} </button> <div className="post"> <h4>Name: {item.name}</h4> <p>Bio: {item.bio}</p> <a href={item.link}>Link: {item.link}</a> </div> </li> ) )} </ul> </div> ); }; const itemsList = [ {_id: 1, name: 'item 1', bio: 'bio 1', link: 'link 1'}, {_id: 2, name: 'item 2', bio: 'bio 2', link: 'link 2'}, {_id: 3, name: 'item 3', bio: 'bio 3', link: 'link 3'}, {_id: 4, name: 'item 4', bio: 'bio 4', link: 'link 4'}, ]; ReactDOM.render( <div> DEMO <Listitem posts={[...itemsList]}/> </div>, document.getElementById("rd") ); .fav-content { width: fit-content; padding: 5px 15px; } .card { background-color: #DDDDFF; margin: 5px 15px; } .post { background-color: #FFFFDD; margin: 5px 15px; } <div id="rd" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>Explicación
Se han proporcionado comentarios en línea en el fragmento de código anterior.