Tengo algunos datos que estoy mapeando y mostrando elementos en consecuencia. Todas mis declaraciones if funcionan HASTA que seleccione más de una casilla de verificación. Pregunta: ¿Por qué solo funciona cuando se marca UN elemento, pero no DOS? (o tres, etc)
Mi componente:
import { useState } from "react"; import "./styles.css"; export default function App() { const data = [ { name: "title 1" }, { name: "title 2" }, { name: "title 3" }, { name: "title 4" }, { name: "title 5" } ]; const [checkBoxSearch, setCheckBoxSearch] = useState([]); // const [checkBoxSearch, setCheckBoxSearch] = useState(""); const [itemChecked, setItemChecked] = useState(true); const checkItem = (e) => { setItemChecked((itemChecked) => !itemChecked); if (itemChecked) { //WHY WONT MY CHECKBOX PUSH ALL CHECKED ITEMS? setCheckBoxSearch([...checkBoxSearch, e.target.name]); // setCheckBoxSearch(e.target.name); } else { setCheckBoxSearch(""); } console.log(checkBoxSearch); }; return ( <div className="App"> <input type="checkbox" name="title 1" value="title 1" onChange={(e) => { checkItem(e); }} ></input> <label>title 1</label> <input type="checkbox" name="title 2" value="title 2" onChange={(e) => { checkItem(e); }} ></input> <label>title 2</label> <div className="itemsWrapper"> {data .filter((value) => { if (value.name === "") { return value; } else if (value.name.includes(checkBoxSearch)) { return value; } }) .map((dataItem) => { return ( <div key={dataItem.name} className="items"> {dataItem.name} </div> ); })} </div> </div> ); }Aquí hay un codesandbox de trabajo si es necesario: https://codesandbox.io/s/intelligent-cdn-ime2oe?file=/src/App.js
Su
const [itemChecked, setItemChecked] = useState(true);es compartido por todo el componente. Si desea que cada casilla de verificación tenga su propio estado que los divs mostrados reflejen más adelante, use una matriz de estado en su lugar para las casillas de verificación.
const values = ['title 1', 'title 2']; function App() { const data = [ { name: "title 1" }, { name: "title 2" }, { name: "title 3" }, { name: "title 4" }, { name: "title 5" } ]; const [valuesToSearchFor, setValuesToSearchFor] = React.useState([]); return ( <div className="App"> { values.map(value => ( <React.Fragment> <input type="checkbox" name={value} value={value} onChange={() => { setValuesToSearchFor( valuesToSearchFor.includes(value) ? valuesToSearchFor.filter(val => val !== value) : [...valuesToSearchFor, value] ); }} ></input> <label>{value}</label> </React.Fragment> )) } <div className="itemsWrapper"> {data .filter(value => !valuesToSearchFor.length || valuesToSearchFor.includes(value.name)) .map((dataItem) => { return ( <div key={dataItem.name} className="items"> {dataItem.name} </div> ); })} </div> </div> ); } ReactDOM.render(<App />, document.querySelector('.react')); <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>