Update item array react redux - reactjs

Question

I have a list of items with a checkbox and I need to update the state in redux, just in the 'checked' item.
In this case, when it is 'checked' it is true and when it is not checked it is false.
My reducer code:
const initialState = {
esportes: [
{
externos: [
{
label: 'Futebol de campo',
checked: false,
name: 'futebolcampo',
},
{
label: 'Vôlei de areia',
checked: false,
name: 'voleiareai',
},
],
},
{
internos: [
{
label: 'Vôlei de quadra',
checked: false,
name: 'voleiquadra',
},
{
label: 'Futebol de salão',
checked: false,
name: 'futebosalao',
},
],
},
],
};
const EsportesReducer = (state = initialState, action) => {
switch (action.type) {
case 'UPDATE_ESPORTES':
return {};
default:
return state;
}
};
export default EsportesReducer;
My return page:
import React from 'react';
import {
Grid,
Paper,
Typography,
FormControlLabel,
Checkbox,
} from '#material-ui/core';
import { useSelector, useDispatch } from 'react-redux';
import { Area } from './styled';
const Esportes = () => {
const dispatch = useDispatch();
const esportes = useSelector(state => state.EsportesReducer.esportes);
const handleChangeCheckbox = event => {
const { checked } = event.target;
const { name } = event.target;
const id = parseInt(event.target.id);
dispatch({
type: 'UPDATE_ESPORTES',
payload: checked,
name,
id,
});
};
return (
<Area>
{console.log(esportes)}
<Paper variant="outlined" className="paper">
<Grid container direction="row" justify="center" alignItems="center">
<Typography>Esportes externos</Typography>
{esportes[0].externos.map((i, k) => (
<FormControlLabel
control={
<Checkbox
checked={i.checked}
onChange={handleChangeCheckbox}
name={i.name}
id="0"
color="primary"
/>
}
label={i.label}
/>
))}
<Typography>Esportes internos</Typography>
{esportes[1].internos.map((i, k) => (
<FormControlLabel
control={
<Checkbox
checked={i.checked}
onChange={handleChangeCheckbox}
name={i.name}
id="1"
color="primary"
/>
}
label={i.label}
/>
))}
</Grid>
</Paper>
</Area>
);
};
export default Esportes;
I know that here:
const EsportesReducer = (state = initialState, action) => {
switch (action.type) {
case 'UPDATE_ESPORTES':
return {};
default:
return state;
}
};
on return I need to make a map to get only the item I want to update. I tried in several ways, but I couldn't.

Answer 1

You need to find the item by the passed id in the action.payload.
const EsportesReducer = (state = initialState, action) => {
switch (action.type) {
case 'UPDATE_ESPORTES':
var chosen = state.esportes.find(esporte => esporte.id === action.payload.id)
return {chosen};
default:
return state;
}
};