How to use map in React to create independent children elements - reactjs

Question

I can successfully use map to create multiple elements from inside my array, but the button that I'm creating and the state I'm assigning to each child element seems to be tied back to the first mapping. Code here along with screen shot.
import React, {useState} from 'react';
import './Switch.css'
const Switch = () => {
const [status, setStatus] = useState(true);
const meats = [
"Chicken",
"Ground Beef",
"Sausage"
]
const meatSwitches = meats.map((meat) =>
<>
<div id="ingredientContainer" className={status === true ? 'containerYes' : 'containerNo'}>
<h2 id='ingredientLabel'>{meat}</h2>
<div id="underLabel">
<h3 id='yes'>Sounds Yummy! </h3>
<input
className="react-switch-checkbox"
id={`react-switch-new`}
type="checkbox"
onClick={() => setStatus(!status)}
/>
<label
className="react-switch-label"
htmlFor={`react-switch-new`}
>
<span className={`react-switch-button`} />
</label>
<h3 id='no'>No, thanks.</h3>
</div>
</div>
</>
);
How can I get each child element to have a functioning button, individual of the first and with independent states (in this case of 'true' and 'false').

Answer 1

There are 2 common approaches:
1. Create a Meat child component with its own single boolean state
and keep this state at the child level, independent of the parent component Switch. You can pass the status data back to parent if you want, via a callback function onStatusChange, for example with an useEffect().
const Meat = ({ meat, onStatusChange } ) => {
const [status, setStatus] = useState(true);
useEffect(() => onStatusChange(status), [status])
return (
<div
id="ingredientContainer"
className={status === true ? 'containerYes' : 'containerNo'}
>
// ... your jsx code here
</div>
}
And your Switch component will look like this:
const Switch = () => {
const meats = [
"Chicken",
"Ground Beef",
"Sausage"
]
const [statusList, setStatusList] = useState([]);
const handleStatusChange = (status) => {
// do what you want with the individual status,
// perhaps push it in a status array?
setStatusList((prev) => [...prev, status]);
};
const meatSwitches = meats.map((meat) =>
<Meat key={meat} meat={meat} onStatusChange={handleStatusChange} />
)
2. Use an array of meat types instead of a boolean state to store checkbox values, then convert it to boolean values later when needed. With this approach you don't have to create a new Meat child component.
const Switch = () => {
const [status, setStatus] = useState([]);
const meats = [
"Chicken",
"Ground Beef",
"Sausage"
];
const handleStatusChange = (event, meat) => {
if (event.target.checked) {
// push meat type to list
// when box is checked
setStatus(prev => [...prev, meat]);
} else {
// remove meat type from list
// when box is unchecked
setStatus(prev => return prev.filter(type => type !== meat));
}
};
const meatSwitches = meats.map((meat) =>
<div
{/* id and key need to be unique */}
id={`ingredientContainer-${meat}`}
key={meat}
{/* check if box is checked */}
className={status.includes(meat) ? 'containerYes' : 'containerNo'}
>
// code
<input
type="checkbox"
onClick={(event) => handleStatusChange(event, meat)}
/>
// ...
</div>
)
Let me know if this answers your question.

Answer 2

The code is expanded upon slightly and 'answered' below. Thank you #kvooak for your help. Turns out that the checkbox that was hidden in CSS in favor of an unresponsive button (literally just some CSS and no 'input' functionality) was what I needed. I made that checkbox visible, added in a function to add or remove items based on checked status to and from an array, and printed that array at the end in realtime to prove that the app was holding/dumping the right items from array allIngredients.
import React, {useState} from 'react';
import './Switch.css'
const Switch = () => {
const [status, setStatus] = useState([]);
const [checked, setChecked] = useState([]);
let meats = [
"Chicken",
"Ground Beef",
"Sausage",
"Pork Chops"
];
let starches = [
"White Rice", "Bread", "Pasta",
"Chips", "Idaho Potatoes", "Sweet Potatoes",
"Tortillas", "Brown Rice", "Red Potatoes"
];
const vegatables = [
"Broccoli", "Green Beans", "Squash",
"Corn", "Okra", "Carrots",
"Onions", "Okra", "Zucchini"
]
const spices = [
"Cayenne Pepper", "Cumin", "Garlic Powder",
"Onion Powder", "Tumeric", "Garam Masala",
"Chili Powder", "Crushed Red Pepper", "Oregano"
]
let allIngredients = [...checked];
const handleStatusChange = (event, ingredient) => {
if (event.target.checked) {
setStatus(prev => [...prev, ingredient]);
allIngredients = [...checked, event.target.value];
} else {
setStatus(prev => prev.filter(type => type !== ingredient));
allIngredients.splice(checked.indexOf(event.target.value), 1);
}
setChecked(allIngredients);
};
var checkedItems = checked.length
? checked.reduce((total, item) => {
return total + ", " + item;
})
: "";
const meatSwitches = meats.map((meat) =>
<>
<div id="ingredientContainer" className={status.includes(meat) ? 'containerYes' : 'containerNo'}>
<p key={meat} id='ingredientLabel'>{meat}</p>
<div id="underLabel">
<input
className="react-switch-checkbox"
value = {meat}
id={`react-switch-new`}
type="checkbox"
onClick={(event) => handleStatusChange(event, meat)}
/>
</div>
</div>
</>
);
const starchSwitches = starches.map((starch) =>
<>
<div id="ingredientContainer" className={status.includes(starch) ? 'containerYes' : 'containerNo'}>
<p key={starch} id='ingredientLabel'>{starch}</p>
<div id="underLabel">
<input
className="react-switch-checkbox"
value={starch}
id={`react-switch-new`}
type="checkbox"
onClick={(event) => handleStatusChange(event, starch)}
/>
</div>
</div>
</>
);
const vegatableSwitches = vegatables.map((vegatable) =>
<>
<div id="ingredientContainer" className={status.includes(vegatable) ? 'containerYes' : 'containerNo'}>
<p key={vegatable} id='ingredientLabel'>{vegatable}</p>
<div id="underLabel">
<input
className="react-switch-checkbox"
value={vegatable}
id={`react-switch-new`}
type="checkbox"
onClick={(event) => handleStatusChange(event, vegatable)}
/>
</div>
</div>
</>
);
const spiceSwitches = spices.map((spice) =>
<>
<div id="ingredientContainer" className={status.includes(spice) ? 'containerYes' : 'containerNo'}>
<p key={spice} id='ingredientLabel'>{spice}</p>
<div id="underLabel">
<input
className="react-switch-checkbox"
value={spice}
id={`react-switch-new`}
type="checkbox"
onClick={(event) => handleStatusChange(event, spice)}
/>
</div>
</div>
</>
);
return (
<>
{meatSwitches}
{starchSwitches}
{vegatableSwitches}
{spiceSwitches}
{checkedItems}
</>
);
};
export default Switch;

Answer 3

You can set the state to be an array of booleans, and have each button correspond to the index. Example:
const status, setStatus = useState([true, true, true])
const handleChange = (index) => {
const prev = [...status];
prev[index] = !prev[index];
setStatus(prev);
}
const meatSwitches = meats.map((meat,index) =>
<>
<div id="ingredientContainer" className={status === true ? 'containerYes' : 'containerNo'}>
<h2 id='ingredientLabel'>{meat}</h2>
<div id="underLabel">
<h3 id='yes'>Sounds Yummy! </h3>
<input
className="react-switch-checkbox"
id={`react-switch-new`}
type="checkbox"
onClick={() => handleChange(index)}
/>
<label
className="react-switch-label"
htmlFor={`react-switch-new`}
>
<span className={`react-switch-button`} />
</label>
<h3 id='no'>No, thanks.</h3>
</div>
</div>
</>
);