En mi componente Home.js, asigno un evento a un componente secundario, que luego se procesa. Esto está funcionando bien hasta ahora, pero también necesito pasar un método. Traté de cambiar mi Home.js (ver más abajo) para que transmita la función deseada, pero no se representa nada ni se arroja ningún error. ¿Qué debo hacer para solucionar este problema?
Para mayor aclaración, también puse el componente secundario (SingleEvent.js) en la versión nueva y antigua a continuación.
antiguo Inicio.js
return (
<>
{props?.events
?
props.events.map((event) => SingleEvent(event))
: <></>}
</>
);
viejo SingleEvent.js
return (
<div className={styles["container"]}>
<div className={styles['pictureFrame']}>
{typeof props.flyerFront !== 'undefined' > 0 ?
<img className={styles['picture']} src={props.flyerFront} alt="new" />
:
<img className={styles['picture']} src={cal} />}
</div>
<div className={styles['name']}>{props.title}</div>
<div className={styles['date']}>| Date: {props.date}</div>
<div className={styles['plus']}>
<img src={plus} onClick={handleClick} />
</div>
</div>
)
nuevo código Home.js
export const Home = (props) => {
console.log(props.events)
function addSafedId (id){
console.warn("twice")
props.addSafedId(id);
}
return (
<>
{props?.events
?
props.events.map((event) => {
<SingleEvent event={event} add={addSafedId} />
}
)
: <></>}
</>
);
}
nuevo código SingleEvent.js
return (
<div className={styles["container"]}>
<div className={styles['pictureFrame']}>
{typeof props.event.flyerFront !== 'undefined' > 0 ?
<img className={styles['picture']} src={props.event.flyerFront} alt="new" />
:
<img className={styles['picture']} src={cal} />}
</div>
<div className={styles['name']}>{props.event.title}</div>
<div className={styles['date']}>| Date: {props.event.date}</div>
<div className={styles['plus']}>
<img src={plus} onClick={handleClick} />
</div>
</div>
)
Actualice su archivo Home.js con el siguiente código
export const Home = (props) => {
console.log(props.events)
function addSafedId (id){
console.warn("twice")
}
return (
<>
{ props.events && props.events.map((event) => {
return(
<SingleEvent event={event} add={addSafedId} />
)})
}
</>
);
}
Está pasando la función addSafedId como add al componente SingleEvent , pero no la está utilizando en ninguna parte dentro del componente SingleEvent .
Para llamarlo dentro del componente SingleEvent , debe escribir
{props.add()}
donde sea que necesite llamar a esa función de acuerdo con su caso de uso.