What do these three dots in React do?
Hello there it's Harit from bonsaiilabs. In today's video, I will explain what these three dots mean in react code base. First let's review, where in react you might see this. Right now, I have an app opened in codesandbox using official react template. I have one component called app. Within this component, I have created an object called
transaction with four properties. In real world scenarios, You may get this data using an
API call, but for simplicity, I have hard-coded this data here. Next up, I'm rendering
H1 header called
Transaction Detail, and then calling a
Transaction component. Here, you see the use of these three dots (
...), which we will talk about in a minute. At the bottom, I have the
Transaction component, which takes four
props and render them inside
H2 tag. We can see the output on the right hand side, but all the data rendered correctly.
ES2015. The similar feature was introduced for objects known as rest properties for object destructuring assignment and spread properties for object literals. This feature was introduced in
ES9 version of the language specification also known as
ES2018. But how is this feature useful? Let's take an example. I am on developer console of Brave browser, which is based on Google's chromium browser. I will create a variable called
one, which refers to an object with two properties,
a2 with the values of
Then I create another variable called
two, which contains two different properties called
b2 with values of
2. Now let's say I want to merge these two objects together
two, and want to store them in a new variable called
mergeTheTwo. So how do we merge these objects? This is where the object spread syntax can help. When using this syntax, the properties from the object flatten up, which means when calling one with three dots inside curly braces, the two properties
a2, will open up and become part of the surrounding object. We can perform this operation with object
two as well by separating the operation by comma. This means the final
mergeTheTwo object will contain four properties, two from object
one and two from object
two. Let's see if that is correct. As a print the object on the console, we can confirm that it is indeed the case.
Transaction component. Please make sure that when using this syntax, the property names inside the object matches with the variable names of the component, because that's how the values are assigned. But why is that useful? It's because if you don't use this syntax, you will have to create props by yourself and pass the values to the
Transaction component. That is a lot of code. If you have a lot of properties, this can easily become cumbersome work, isn't it? Using the concise spread syntax helps you write less and make code more readable. Fantastic! So hope you now have the clear idea on the three dots used inside react. If you have any questions or ideas put in the comments below, and we as a team would be happy to answer them. See you soon again.