What does three dots do in ReactJS [duplicate]

by

This is a spread operator syntax in react.

From the MDN DOCS:

The spread syntax allows an expression to be expanded in places where
multiple arguments (for function calls) or multiple elements (for
array literals) or multiple variables (for destructuring assignment)
are expected.

In your case <Person key={x.name} {...x} /> It means that send the entire object or properties contained with x as it looks as props to the Person Component

For example if

var x = {
     name: "Hello",
     last_name: "World"

}

Then if you do <Person key={x.name} {...x} />

The above will be equivalent of

<Person key={x.name} name={x.name} last_name={x.last_name}/>

The order in which the spread syntax is used along with the props is also significant.

Consider a case where you pass the props to a component like

var data = {
     name: 'abc',
     age: '25',
     college: 'lmit'
}

and if you use the spread operator syntax like

 <Person key={x.name} name="xyz" {...data} />

Then the prop name="xyz" is overwritten by the key:value pair resolved from data. So the final Person component call will look like

 <Person key={x.name} name="abc" age="25" college="lmit" />

However when you write it like

 <Person key={x.name}  {...data} name="xyz" />

Then the prop name="abc" that is resolved from data is overwritten by name="xyz" that is passed explicitly to Person. So the final Person Component call will look like

  <Person key={x.name} name="xyz" age="25" college="lmit" />

More Related Contents:

  1. setState doesn’t update the state immediately
  2. How to update nested state properties in React
  3. Unable to access React instance (this) inside event handler [duplicate]
  4. What do multiple arrow functions mean in JavaScript?
  5. Adding script tag to React/JSX
  6. How to scroll to an element?
  7. When to use ES6 class based React components vs. functional ES6 React components?
  8. Why and when do we need to bind functions and eventHandlers in React?
  9. React Native: require() with Dynamic String?
  10. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  11. How to add multiple classes to a ReactJS Component?
  12. React useState hook event handler using initial state
  13. Can I use arrow function in constructor of a react component?
  14. Active link with React-Router?
  15. When should I use brackets with imports
  16. setState() inside of componentDidUpdate()
  17. Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
  18. where is create-react-app webpack config and files?
  19. Unable to use Arrow functions inside React component class [duplicate]
  20. Best way to polyfill ES6 features in React app that uses create-react-app
  21. Importing multiple files in react
  22. React.createClass vs. ES6 arrow function
  23. this.setState is not a function [duplicate]
  24. How do you import a javascript package from a cdn/script tag in React?
  25. Error: How to serialize data from getStaticProps : Next.js
  26. What do curly braces mean in JSX (React)?
  27. Update one of the objects in array, in an immutable way
  28. How to namespace es6 classes (for React components)
  29. React functional component default props vs default parameters
  30. Exporting functions with reactjs and babel

Leave a Comment