Tengo 2 íconos mui que quiero cambiar cada clic. Encontré un componente para ellos y uno de los accesorios (llamado btnClicked) determina el estado, el componente se representa al hacer clic, pero los botones del icono no cambian, el código es:
import React,{useState} from 'react'; import {IconButton } from '@material-ui/core'; import AddIcon from '@mui/icons-material/Add'; import UndoIcon from '@mui/icons-material/Undo'; import CreateOutlinedIcon from '@mui/icons-material/CreateOutlined' import BorderColorIcon from '@mui/icons-material/BorderColor' const AddButton = ({onBtnClick,btnClicked,btnText,btnColor}) => { const create = () => { return ( <div> <IconButton aria-label="add an alarm" onClick={onBtnClick} > <BorderColorIcon color="secondary" style={{cursor:'pointer'}} /> </IconButton> </div> ) } const undo = () => { return ( <div> <IconButton aria-label="add an alarm" onClick={onBtnClick} > <UndoIcon color="secondary" style={{cursor:'pointer'}} /> </IconButton> </div> ) } console.log(btnColor) if ({btnClicked}) { return( <div> { create() } </div> ) } else { return( <div> { undo() } </div> ) } } export default AddButtonpor favor, ayúdame :)
Su declaración if contiene corchetes innecesarios. En vez de
if ({btnClicked}) {Deberías
if (btnClicked) { Si su componente aún no se actualiza, entonces no está actualizando los accesorios del componente principal. Debe asegurarse de que onBtnClick una actualización de los accesorios
Lo primero que noté es que no debería necesitar btnClicked dentro de un objeto.
if (btnClicked) { return( <div> { create() } </div> ) }