Question

What do the three dots (...) mean in React JSX?

In React JSX, I’ve noticed the use of three dots (...) in various places, such as <Component {...props} />. I’m aware it’s related to spreading, but I’m unsure about its specific purpose in JSX. Can someone explain what it does and when to use it?

4o

Answer 1

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: 'Ram',

    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}/>