Tengo el siguiente componente, en el cual con un array dinamico lo recorro con un map y dibujo el componente, el codigo es el siguiente:
function createData(zone: string, tasahistorica: number, fat: number, tasacerebro: number, protein: number) {
return { zone, tasahistorica, fat, tasacerebro, protein };
}
const rows = [
createData('Zona Norte', 159, 6.0, 24, 4.0),
createData('Zona Metropolitana', 237, 9.0, 37, 4.3),
createData('Zona Centro', 262, 16.0, 24, 6.0),
createData('Zona Sur', 305, 3.7, 67, 4.3),
];
export function ZoneGrid() {
const [spacing, setSpacing] = React.useState<GridSpacing>(1);
const classes = useStyles();
const [cerebro, setcerebro] = useState(0);
const handlerclick = (row:any,cerebro: any, index: any) => {
cerebro= row + 1;
console.log(row,cerebro );
setcerebro(cerebro);
// console.log(cerebro, index);
}
return (
<Grid container justify="center" className={classes.root}>
<Grid container justify="center" className={classes.body} >
<Grid container className={classes.cabecera}>
<Typography className={classes.title} style={{ width: 290 }}>Lugar</Typography>
<Typography className={classes.title} style={{ width: 200 }}>Tasa Historica</Typography>
<Typography className={classes.title} style={{ width: 30 }}></Typography>
<Typography className={classes.title} style={{ width: 50 }}></Typography>
<Typography className={classes.title} style={{ width: 200 }}>Cerebro</Typography>
<Typography className={classes.title} style={{ width: 30 }}></Typography>
</Grid>
{
rows.map((row: any, index: any) => (
<Grid key={row.zone} container style={{ borderBottom: '1px solid #6666' }} >
<Typography className={classes.bodytextplace} style={{ width: 290 }}>
<Typography className={classes.bodytext + " " + classes.subtitle} >Lugar</Typography>
{row.zone}
</Typography>
<Typography className={classes.bodytext + " " + classes.columnvar} >
<Typography className={classes.bodytext + " " + classes.subtitle} >Tasa Historica</Typography>
{row.tasahistorica}
</Typography>
<Typography className={classes.bodytext + " " + classes.updown}>
<Grid container direction="column" justify="center" alignItems="center">
<Button variant="contained" style={{ backgroundColor: 'white', boxShadow: 'none' }} size='small' >
<ExpandLessTwoToneIcon></ExpandLessTwoToneIcon>
</Button>
<Button variant="contained" style={{ backgroundColor: 'white', boxShadow: 'none' }} size='small' >
<ExpandMoreTwoToneIcon></ExpandMoreTwoToneIcon>
</Button>
</Grid>
</Typography>
<Typography className={classes.bodytext} style={{ width: 50, color: '#666666' }}>|</Typography>
<Typography className={classes.bodytext + " " + classes.columnvar} key={row.zone}>
<Typography className={classes.bodytext + " " + classes.subtitle} >Cerebro</Typography>
{cerebro}
</Typography>
<Typography className={classes.bodytext + " " + classes.updown} >
<Grid container direction="column" justify="center" alignItems="center">
<Button variant="contained" style={{ backgroundColor: 'white', boxShadow: 'none' }} onClick={() => handlerclick(row.tasacerebro,cerebro , index)} size='small' >
<ExpandLessTwoToneIcon></ExpandLessTwoToneIcon>
</Button>
<Button variant="contained" style={{ backgroundColor: 'white', boxShadow: 'none' }} size='small' >
<ExpandMoreTwoToneIcon></ExpandMoreTwoToneIcon>
</Button>
</Grid>
</Typography>
</Grid>
))
}
<Grid container justify="space-between" className={classes.buttonSection}>
<Button className={classes.buttonBackchanges}>Deshacer Cambios</Button>
<Button className={classes.buttonDone}>Guardar Cambios</Button>
</Grid>
</Grid>
</Grid>
);
}
el código me dibuja lo siguiente
lo que esta marcado en la imagen es un button que llama a handlerclick donde cambia el state de cerebro y le suma 1 al valor el problema es que cambia el valor de todas las filas y yo solo quiero que cambie el valor de la fila donde se esta haciendo click.
el codigo funciona basicamente asi (para ahorrar tiempo en analisis)
- creo una constante que es el array que luego recorrere
- declaro dentro de la función del componente los state cerebro y setcerebro, este state es el que debe sumar o restar segun se haga click
- esta hecho con material ui pero no subi todo el codigo si no mas bien la logica