Feat: re-shuffle functionality by incrementing hidden state
This commit is contained in:
parent
8b7ab4b7a1
commit
cf211f471f
|
@ -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}
|
||||||
|
|
Loading…
Reference in New Issue