Tengo un componente que representa un montón de componentes llamados ActionItem
<ActionItem title={'Client Assigned'} icon={<MdOutlineAssignmentTurnedIn />} /> <ActionItem title={'Inital Client Follow Up'} icon={<BsFillPersonCheckFill />} /> <ActionItem title={'Validated Need'} icon={<BiDonateHeart />} /> <ActionItem title={'Initiated Discovery'} icon={<RiCompassDiscoverLine />} /> <ActionItem title={'Service In Progress'} icon={<GiProgression />} /> <ActionItem title={'Fulfilled The Need'} icon={<ImCheckmark />} /> Dentro de mi ActionItem tengo una función: handleToggle() que activa onClick y prácticamente agrega o elimina una clase "activa". Quiero que esta función esté disponible para todos los componentes, EXCEPTO el que tiene el título "Asignado por el cliente".
Componente de elemento de acción:
const [toggleItem, setToggleItem] = useState(false) const [date, setDate] = useState('') const handleToggle = () => { setToggleItem(!toggleItem) setDate(new Date()) if (date !== '') { setDate('') } } useEffect(() => { title === 'Client Assigned' ? handleToggle() : null }, []) return ( <React.Fragment> <div className={toggleItem ? 'ReportsModal' : 'ReportsModal not-active'}> <span style={title === 'Fulfilled The Need' ? ( { borderColor: 'green', backgroundColor: 'green', color: '#fff' } ) : null} className={'hover'} onClick={title === 'Client Assigned' ? handleToggle : null}> {icon} </span> <div> <h3>{title}</h3> <p>{date !== '' ? moment(date).format('D MMM YYYY') : date}</p> {toggleItem ? ( <h5 onClick={handleInitComment} className='hover'><AiOutlinePlusCircle style={iconStyles} /> Add Comment</h5> ) : null} </div> </div>el condicional que estoy tratando de usar actualmente no funciona. ¿Algún consejo?
si solo desea activar handleToggle condicionalmente en función del título === "Asignado por el cliente", haría esto.
const handleToggle = (title) => { if (title === "Client Assigned") { setToggleItem(!toggleItem) setDate(new Date()) if (date !== '') { setDate('') } } }entonces su onClick se vería así:
onClick={(title) => handleToggle(title)}>Esto debería funcionar y es mucho más fácil de leer también.
Puede crear una matriz de títulos prohibidos/prohibidos y usar un operador AND en el accesorio onClick. Por ejemplo:
function Component({ title, handleToggle }) { const bannedTitles = ["Client Assigned"]; useEffect(() => { title === "Client Assigned" ? handleToggle() : null; }, []); return ( <> <div onClick={() => !bannedTitles.includes(title) && handleToggleItem()} /> </> ); } export default Component;