by Sai gowtham

Three dots(...) inside React components

In JavaScript, we have three dots ... syntax which is called spread operator it helps us to expand the iterable elements or object properties.

In react, by using the three dots syntax we can spread the props easily instead of passing data to the each prop.

Let’s say we have data like this.

var person= {
    name: 'John',
    age: 10
}

We can use the spread operator to pass the above data as props.

<Person {...person}/>

This is the same as.

<Person name={person.age} age={person.age}/>

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course