In my component Home.js I map an event to a child component, which is then being rendered. This is working fine so far, but I need to pass a method as well. I tried to change my Home.js (see below) so it passes down the desired function, but nothing is being rendered and no error thrown. What do I need to do to fix this problem?
For further clarification I put the child component (SingleEvent.js) in the new and old version down below as well.
old Home.js
return (
<>
{props?.events
?
props.events.map((event) => SingleEvent(event))
: <></>}
</>
);
old 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>
)
new code 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} />
}
)
: <></>}
</>
);
}
new code 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>
)
Update your Home.js file with the following code
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} />
)})
}
</>
);
}
You are passing addSafedId function as a add prop to SingleEvent component but you are not using it anywhere inside SingleEvent component.
To call it inside SingleEvent component you need to write
{props.add()}
wherever you need to call that function according to your use case.