Tengo una lista simple.
const [progressBar, setProgressBar] = useState([ { isActive: false, name: "step1" }, { isActive: false, name: "step2" }, { isActive: false, name: "step3" }, { isActive: false, name: "step4" }, { isActive: false, name: "step5" }, { isActive: false, name: "step6" }, { isActive: false, name: "step7" }, ]);Muestro esta lista de usuarios y usuarios que pueden cambiarla. Pero el problema es que es necesario crear una condición cuando el usuario elige un mínimo de 2 y un máximo de 5 espacios.
Por ejemplo, cuando se carga la página, el botón de radio no se elige. El usuario no puede elegir el primer elemento, debe elegir el segundo. O si eligió el segundo después cuando quiere cambiar, solo puede cambiar el máximo de 2 a 7 (el mínimo de 2 a 4). Algo así creo que puedo explicar la lógica.
const [progressBar, setProgressBar] = useState([ { isActive: false, name: "step1" }, { isActive: false, name: "step2" }, { isActive: false, name: "step3" }, { isActive: false, name: "step4" }, { isActive: false, name: "step5" }, { isActive: false, name: "step6" }, { isActive: false, name: "step7" } ]); const checkMinimumOfTwoAndMaxOfFive = ( index, idx, returnIsActive, returnNonActive ) => { if (index >= idx) { return returnIsActive; } else { return returnNonActive; } }; return ( <div> {progressBar.map((el, i) => ( <span key={el.name} className={el.isActive ? "red" : ""} onClick={() => setProgressBar( progressBar.map((item, idx) => checkMinimumOfTwoAndMaxOfFive( i, idx, { ...item, isActive: true }, { ...item, isActive: false } ) ) ) } > {el.name} </span> ))} </div> );Primer intento:
Intento encontrar el último elemento isActive y manipularlo.
const gap = array .slice() .reverse() .findIndex((item) => item.isActive); if (gap >= 4 || gap === 0 || gap === -1) { return returnNonActive; } else { if (index >= idx) { return returnIsActive; } else { return returnNonActive; } }esto no funciona
Podrías usar algo como esto
Código de trabajo: https://codesandbox.io/s/competent-vaughan-cc2r8?file=/src/App.js:92-917
const limit = 5; const size = 7; const minimum = 2; const [step, setStep] = useState(minimum - 1); const stepUp = () => { if (step < limit) { setStep(step + 1); } }; const stepDown = () => { if (step >= minimum) { setStep(step - 1); } }; const Steps = ({ step }) => { const Components = []; for (let index = 0; index <= size; index++) { Components.push(<Step name={`step${index}`} isActive={index <= step} />); } return Components; }; const Step = ({ name, isActive }) => ( <span className={isActive ? "red" : ""} onClick={stepUp}> {name} </span> ); return ( <div> <Steps step={step} /> <div> <button onClick={stepUp}>STEP UP</button> <button onClick={stepDown}>STEP DOWN</button> </div> </div> );