React: map event objects and functions to components

Question

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>
  )

Anuradha Aggarwal · Accepted Answer · 2022-09-24 11:43:42Z

1

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.

edited Sep 24, 2022 at 11:43

answered Sep 24, 2022 at 11:12

Anuradha Aggarwal

513 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jibbolito Over a year ago

Yes, I know that but the problem is that nothing gets rendered in SingleEvent.js

Anuradha Aggarwal Over a year ago

You also need to update your Home.js file. See my edits

Collectives™ on Stack Overflow

React: map event objects and functions to components

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related