Estoy usando Material Table para mostrar mis datos. Aquí parece, https://i.postimg.cc/4x6hbm5N/image.png
He declarado un state arriba en mi código
const [sharedOrdersList, setShareOrdersList] = useState([]) Cuando el User haga clic en el botón Share , enviaré el Order Id a sharedOrdersList . Funciona. Pero ahora mi problema era que quería cambiar el Nombre del botón a UnShare y el color del botón a otro color. Probé de varias maneras. pero no se como hacerlo
Aquí está mi código de función:
const shareOrderBtnClick = (orderID) => { sharedOrdersList.push(orderID) alert("share Btn Clicked") console.log(sharedOrdersList) }Código de retorno:
allOrderDatas.map((row) => ( <TableRow> <TableCell"> <Button variant="contained" onClick={()=>{shareOrderBtnClick(row.orderID)}} style={{ backgroundColor:sharedOrdersList.includes(row.orderID)?"#59886B":"#D54062",}}> <ShareIcon />{sharedOrdersList.includes(row.orderID)?"UnShare":"Share"</Button> </TableCell> </TableRow>No sé cómo cambiar el elemento específico en la celda de la fila de la tabla. Por favor, ayúdame con algunas soluciones.
Los estados en reaccionar son inmutables. useState devuelve un valor y una función de actualización. No puede cambiar directamente el valor. Para actualizar el estado, debe llamar a la función setShareOrdersList con el nuevo valor.
En tu ejemplo
const shareOrderBtnClick = (orderID) => { setShareOrdersList([... sharedOrdersList, orderID]); // OR BETTER // setShareOrdersList(prevState => [...prevState, orderID]); }