Cada vez que hago clic en los botones "aumentar" o "disminuir" para un determinado jugador, quiero que la puntuación aumente solo para ese jugador. Sin embargo, en este momento, cuando hago clic en cualquiera de los botones, aumenta ambas puntuaciones. Sé que probablemente sea algo simple que estoy pasando por alto por completo, pero se agradece cualquier ayuda. ¡Gracias de antemano! Aquí está mi código https://codesandbox.io/s/objective-curran-6ogn3?file=/src/App.js:0-2090 :
import "./styles.css"; import {Component, useState} from 'react'; export default function App() { const [count, setCount] = useState(0); const [playerScore, setplayerScore] = useState([{ nameOne: 'Player 1' }, { nameTwo: 'Player 2' } ]); const increase = () => { setCount(count + 1); setplayerScore(playerScore); }; const decrease = () => { setCount(count - 1); setplayerScore(playerScore); }; return ( <main> {/* player 1*/} <div> {playerScore.map((player) => { return ( <div> <h2 className="name">{player.nameOne}</h2> </div> ); })} </div> <div> <div className="score">{count}</div> {/* increase button */} <button onClick={increase}> Increase </button> {/* decrease button */} <button onClick={decrease}> Decrease </button> </div> {/* player 2 */} <div> {playerScore.map((player) => { return ( <div> <h2 className="name">{player.nameTwo}</h2> </div> ); })} </div> <div> <div className="score">{count}</div> <section> <button onClick={increase}>Increase</button> <button onClick={decrease}>Decrease</button> </section> </div> </main> ); } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> import "./styles.css"; import {Component, useState} from 'react'; export default function App() { const [count, setCount] = useState(0); const [playerScore, setplayerScore] = useState([{ nameOne: 'Player 1' }, { nameTwo: 'Player 2' } ]); const increase = () => { setCount(count + 1); setplayerScore(playerScore); }; const decrease = () => { setCount(count - 1); setplayerScore(playerScore); }; return ( <main> {/* player 1*/} <div> {playerScore.map((player) => { return ( <div> <h2 className="name">{player.nameOne}</h2> </div> ); })} </div> <div> <div className="score">{count}</div> {/* increase button */} <button onClick={increase}> Increase </button> {/* decrease button */} <button onClick={decrease}> Decrease </button> </div> {/* player 2 */} <div> {playerScore.map((player) => { return ( <div> <h2 className="name">{player.nameTwo}</h2> </div> ); })} </div> <div> <div className="score">{count}</div> <section> <button onClick={increase}>Increase</button> <button onClick={decrease}>Decrease</button> </section> </div> </main> ); } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>Hice esta bifurcación basada en tu código. https://codesandbox.io/s/cranky-hooks-q9ntu?file=/src/App.js
Refactoricé algo de lógica y agregué la funcionalidad que entiendo que desea. Especialmente la lógica de aumento/disminución.
El error principal fue que estaba usando el mismo estado para toda la matriz, por lo que el valor siempre será el mismo para todos los elementos.