Pass A LOT OF PROPS Easily in React JS | Object Spread Operator & Object Destructuring in React

welcome to web style press while working with  react components we pass down data by using props   we do that by creating a prop name and set it  equal to its appropriate value but how to pass   down a lot of props to a child component should  we pass each prop individually the answer is no   an easy way to pass down a lot of props is to use  object spread operator no need to write all the   prop names and their values this is our react app  and this is our app.js component main component const data three properties are  inside this data this is just the name   you can use any name instead of data  we have got the name platform and subs it's an object containing properties we have  to pass these properties these three properties   down to a component let's create that component react function component we don't need import  react let's call this component in main component import com2 from dot jsx save here's the component now we have  to pass this data to this component   how will we do that to pass down  props individually we do it like name platform subs data dot name data dot platform data dot subs data dot name dot  platform dot subs these are props name platform   subs to call these props in child component name  well if we've got one prop then this is fine but   if we have multiple props like this then we have  to use this thing curly braces and then in return name and we're calling this prop here name  platform and subs save name web style plus   platform youtube subs 2500 okay it works if we are  just passing all props or most of the props down   the component bypass these individually  instead of doing this we can do it like three periods data now what is this  data this thing is understandable   it is the name of the object that we have used  here const data but what are these three periods   it is object spread operator or spread syntax  spread syntax can be used when all elements   from an object or array need to be included in  a list if we use only data without three periods   it won't work if i just save this file this still  works but we have got a better way to handle this   in child component now props now it will not work and then props dot name props dot platform props dot subs now it is working  props but here it was data   with object spread operator we can use  any name here like if i use just prop it will also work if i just use p it will work but you know  it is better to call it data   because its name was data here  just for our understanding to understand to better understand and uh for  clear visibility about what's been transferred   so we have used data here and here data dot name  data dot platform data dot subs here data makes   more sense because the object that is being passed  has the same name now we can use day structuring   to avoid these long names d structuring allows us  to extract multiple pieces of data from an array   or object and assign them to their own variables  so here before return const name platform subs equals data test data now  we don't need data here data dot   will remove this extra information and  we'll just use name platform and subs   and it will work too so this is how object spread  operator or spread syntax and d structuring works it makes our work easier to pass down props in form of spread syntax  by using just one name the object name   and then here getting that object then  destructuring it and then extracting properties   from this object in child components so this  is how we can pass down a lot of props to child   components easily okay i hope it helped like share  subscribe and i will see you in the next video

Channel: WebStylePress

Views: 12,271

Keywords: object spread operator in react js, spread operator array of objects, object spread operator, object destructuring in react js, pass props easily in react js, react spread operator, spread operator in react, object destructuring, react tutorial, reactjs tutorial, reactjs, react js, react js tutorial, react js tutorials, javascript, js, js destructuring, spread operator javascript, spread syntax, spread operator in javascript, javascript spread operator, Javascript destructuring

Id: aWWIqdCc4GA

Length: 7min 32sec (452 seconds)

Published: Sun Apr 10 2022