spreading props for Child component in React js

M Hassan khan answered on December 30, 2022 Popularity 2/10 Helpfulness 1/10

answer spreading props for Child component in React js

spreading props for Child component in React js

Comment

/*
In vanilla JS , we might use object spread syntax to make shallow copy
of an object, because it is going to take all of its existing
properties and simply provide them in a new object.

However in the context of React this syntax works in a 
very interesting manner, i.e all of the object's properties
become props that are passed down to child component.

Let's see an example.
*/

export default function App() {
  const employees = [
    {
      name:'Mehran',
      age:35,
      id:1
    }, 
    {
      name:'Hassan',
      age:32,
      id:2
    },
    {
      name:'Khan',
      age:30,
      id:3
    }
  ]
  return (
    <div className="App">
     
     {
       employees.map(employee=>(
    /*
    All of the object's properties become props and these are passed 
    down to the child component. as our object had three properties, 
    so three props are passed down to EmployeeCard component.
*/
        <EmployeeCard key={employee.id} {...employee}/>
         
       
       ))
     }
    </div>
  );
}

// Child Component


export const EmployeeCard = ({name, age})=>{
  return (
    <div>
      <h3>{name}</h3>
      <h4>{age}</h4>
    </div>
  )
}

Popularity 2/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Dec 30 2022

M Hassan khan

0 Answers Avg Quality 2/10

spreading props for Child component in React js

Contents

More Related Answers

spreading props for Child component in React js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.