Feat: re-shuffle functionality by incrementing hidden state

This commit is contained in:
Richard Wong 2023-10-19 09:31:56 +09:00
parent 8b7ab4b7a1
commit cf211f471f
Signed by: richard
GPG Key ID: 5BD36BA2E9EE33D0
1 changed files with 20 additions and 0 deletions

View File

@ -139,6 +139,16 @@ function App() {
}; };
// refresh button for refresh
const RefreshButton = ({ onClick }) => {
return <button onClick={onClick}>Shuffle</button>;
};
// refresh variables where incrementing state forces refresh
const [refreshKey, setRefreshKey] = useState(0);
const handleRefresh = () => {
// Increment the key to force a re-render
setRefreshKey(refreshKey => refreshKey + 1);
};
return ( return (
<div className="App"> <div className="App">
@ -163,6 +173,7 @@ function App() {
onChange={handleShuffleCheckboxChange} onChange={handleShuffleCheckboxChange}
/> />
</h2> </h2>
<p>(Otherwise cards will appear in sequential order)</p>
<h2>Pick Your Packs:</h2> <h2>Pick Your Packs:</h2>
<CheckboxWidget <CheckboxWidget
@ -172,6 +183,15 @@ function App() {
setExpanded={setExpanded} setExpanded={setExpanded}
/> />
<div key={refreshKey}>
{toShuffle ?
<>
<h2>Shuffle Cards:</h2>
<RefreshButton onClick={handleRefresh} />
</>:
<p></p>}
</div>
<h1>Verses:</h1> <h1>Verses:</h1>
<GenerateTestList <GenerateTestList
packs={checked} packs={checked}