Pass data as object down to React child component

Question

I created a helper routeData to map the data and pass the data to the child component <MyComponent />:

const routeData = {
  routeOne: {
    title: 'Title one',
    description: 'Description one',
    image: '/Header.jpg',
    style: config.style,
    id: '01',
  },
  routeTwo: {
    title: 'Title two',
    description: 'Description two',
    image: '/Header02.jpg',
    style: config.style02,
    id: '02',
  },
};

However now I have to add all this props like:

  <Route
    path={routeData.routeOne.path}
    render={() => (
      <MyComponent
        title={routeData.routeOne.title}
        description={routeData.routeOne.description}
        imageUrl={routeData.routeOne.image}
        link={routeData.routeOne.link}
        id={routeData.routeOne.id}
        // etc
      />
    )}
  />

Is there a better way to construct this helper and pass everything by one prop e.g.:

<Route path={routeData.routeOne.path} render={() => (   
  <MyComponent data={routeData.routeOne} /> )}
/>

This seems to be the right way. Did you tried to console.log the data props within the MyComponent component? — Ingenious_Hans, Oct 11 '22 at 19:14

score 0 · Answer 1 · answered Oct 11 '22 at 19:16

0

You just spread the object in you component like this

<MyComponent {...routeData.routeOne}/>

and inside MyCompoenet you can access them from props


function MyComponent (props){

  .
  .
  .
  return <> {props.title} </>

}

answered Oct 11 '22 at 19:16

Ahmed Gaafer

1,603
9
26

Pass data as object down to React child component

1 Answers1