I have some data that I am mapping through and displaying items accordingly.
My if statements all work UNTIL I select more than one checkbox.
Question: Why does it only work when ONE item is checked, but not TWO? (or three, etc.)
My Component:
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>
);
}
Here is a working codesandbox if needed: https://codesandbox.io/s/intelligent-cdn-ime2oe?file=/src/App.js
Your
const [itemChecked, setItemChecked] = useState(true);
is shared by the whole component. If you want each checkbox to have its own state that the displayed divs reflect later, use an array of state instead for the checkboxes.
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>