ReferenceError: Cannot access 'players' before initialization - reactjs

Question

Following suggestions from You (StackOverflow), I have rewritten my app to [several components]https://codesandbox.io/s/points-scored-forked-brnni?file=/src/components/ScoredPointsList.js:0-561
Now when I run yarn start, I get a reference error. After googling, I have tried with "everything" including:
changed from npm to yarn, changed in package.json ... but nothing seems to help.
How can I change the code to make it work?
import NewPointsScored from './components/NewPointsScored';
import ScoredPointsList from './components/ScoredPointsList';
function App() {
const [scorerNumber, setScorerNumber] = useState('');
const [totPoints, setTotPoints] = useState(0);
const [players, setPlayers] = useState([]);
const sortedPlayers = [...players].sort(
(a, b) => a.scorerNumber - b.scorerNumber
);
const onePointHandler = () => {
// eslint-disable-next-linex
const players = [...players];
if (scorerNumber.trim() === 0) {
return;
}
const posit = players
.map((player) => player.scorerNumber)
.indexOf(+scorerNumber);
if (posit !== -1) {
setPlayers((players) =>
players.map(
(player, i) =>
(i = posit ? {...player, totPoints: player.totPoints + 1} : player)
)
);
} else {
const newScorer = {
id: Math.floor(Math.random() * 1000),
scorerNumber: +scorerNumber,
totPoints: totPoints + 1,
};
setPlayers([...players, newScorer]);
setTotPoints(totPoints);
}
setScorerNumber('');
};
const twoPointsHandler = (e) => {
e.preventDefault();
console.log('scored 2p');
};
const threePointsHandler = (e) => {
e.preventDefault();
console.log('3p Made!');
};
return (
<div className="App">
<NewPointsScored
setScorerNumber={setScorerNumber}
scorerNumber={scorerNumber}
onOneP={onePointHandler}
onTwoP={twoPointsHandler}
onThreeP={threePointsHandler}
/>
<ScoredPointsList sortedPlayers={sortedPlayers} />
</div>
);
}
export default App;
Thanks in advance
Regards
Peter

Answer 1

You are trying to modify players variable before it is being initialized , you can useMemo(which runs only if players value change) and modify sortPlayers after it is available and also you were trying to initalize players again that was causing issue
const sortedPlayers =useMemo(()=>{
return players.sort(
(a, b) => a.scorerNumber - b.scorerNumber
);
},[players])
Full Code:
import NewPointsScored from './components/NewPointsScored';
import ScoredPointsList from './components/ScoredPointsList';
import {useMemo} from 'react'
function App() {
const [scorerNumber, setScorerNumber] = useState('');
const [totPoints, setTotPoints] = useState(0);
const [players, setPlayers] = useState([]);
const sortedPlayers =useMemo(()=>{
return players?.sort(
(a, b) => a.scorerNumber - b.scorerNumber
);
},[players])
const onePointHandler = () => {
const _players = [...players];
if (scorerNumber.trim() === 0) {
return;
}
const posit = _players
.map((player) => player.scorerNumber)
.indexOf(+scorerNumber);
if (posit !== -1) {
setPlayers((players) =>
players.map(
(player, i) =>
(i = posit
? { ...player, totPoints: player.totPoints + 1 }
: player)
)
);
} else {
const newScorer = {
id: Math.floor(Math.random() * 1000),
scorerNumber: +scorerNumber,
totPoints: totPoints + 1
};
setPlayers([..._players, newScorer]);
setTotPoints(totPoints);
}
setScorerNumber("");
};
const twoPointsHandler = (e) => {
e.preventDefault();
console.log('scored 2p');
};
const threePointsHandler = (e) => {
e.preventDefault();
console.log('3p Made!');
};
return (
<div className="App">
<NewPointsScored
setScorerNumber={setScorerNumber}
scorerNumber={scorerNumber}
onOneP={onePointHandler}
onTwoP={twoPointsHandler}
onThreeP={threePointsHandler}
/>
<ScoredPointsList sortedPlayers={sortedPlayers} />
</div>
);
}
export default App;
refer sandbox: