React: map event objects and functions to components

Jibbolito 0
Viewed 25

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>
  )
render react-props dictionary reactjs javascript
1 Answers

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.

Anuradha Aggarwal0
Related