What Does Three Dots Do in Reactjs

What are these three dots in React doing?

That's property spread notation. It was added in ES2018 (spread for arrays/iterables was earlier, ES2015), but it's been supported in React projects for a long time via transpilation (as "JSX spread attributes" even though you could do it elsewhere, too, not just attributes).

{...this.props} spreads out the "own" enumerable properties in props as discrete properties on the Modal element you're creating. For instance, if this.props contained a: 1 and b: 2, then

<Modal {...this.props} title='Modal heading' animation={false}>

would be the same as

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

But it's dynamic, so whatever "own" properties are in props are included.

Since children is an "own" property in props, spread will include it. So if the component where this appears had child elements, they'll be passed on to Modal. Putting child elements between the opening tag and closing tags is just syntactic sugar — the good kind — for putting a children property in the opening tag. Example:

class Example extends React.Component {  render() {    const { className, children } = this.props;    return (      <div className={className}>      {children}      </div>    );  }}ReactDOM.render(  [    <Example className="first">      <span>Child in first</span>    </Example>,    <Example className="second" children={<span>Child in second</span>} />  ],  document.getElementById("root"));

.first {  color: green;}.second {  color: blue;}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Why does jsx require three dots in this code?

If you check out MDN: Spread operator:

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.

If you see, the spread operator inside the jsx syntax to evaluate expression, then

<Button {...condition ? {bsStyle: 'success'} : {}} />

Would become something like, (after babel run with react bootstrap example):

_react2.default.createElement(_reactBootstrap.Button, condition ? { bsStyle: 'success' } : {})

It can also be written as:

<Button bsStyle={condition ? 'success' : ''}  />

Which, then means you are passing the props bsStyle with empty string.

So in order to conditionally pass the props itself, you can leverage the spread operator and evaluate the expression. This helps us to pass multiple props on with conditions:

<Button {...condition ? {bsStyle: 'success', bsSize:"large"} : {}} />

Rather than:

<Button bsStyle={condition ? 'success' : ''} bsSize={condition ? 'large' : ''} />

{ ...action.response } what is the use of that 3 dots in react.js or redux

It's a ES6 feature, spread arrow operator. The spread syntax allows an
expression to be expanded in places where multiple arguments or
multiple elements are expected.

let a = [1,2,3,4];let b = [...a, 5,6,7];console.log(b); //1,2,3,4,5,6,7

What is ... (3 dots) in javascript?

In that example, the ... is a Rest parameter, a syntax allows us to represent an indefinite number of arguments as an array.

It is somewhat similar (or not :), but it's not the same as the spread syntax.

In your example, the stores argument inside is an array. If function StoreMixin(...stores) is called like StoreMixin(1,2,3) then stores will be [1, 2, 3] and so on.

What does 3 dots actually do here

The ES6 spread operator can be used on Objects to 'spread' their values into another object to create a clone of that object. It is similar in concept to using Object.assign

Sample

const x = { a : 1 };
const y = {...x}; // y = {a:1} Equivalent to : const y = Object.assign({},x);
const z = {...x , b: 2} // z = {a:1,b:2} Equivalent to Object.assign({a:1},{b:2})
const w = {...x , a: 2} // w = {a:2} Equivalent to Object.assign({a:1},{a:2})
const p = {a:2, ...x} // p={a:1} Equivalent to using Object.assign({a:2},{a:1})

Handy link explaining this in the context of Redux

EDIT: Based on discussion in comments:
In your goNext method, when this happens:

this.props.getValue({
    offset
})

You are actually creating an object like this {offset:15}. So when this is used in getValue like:

const allParams = {
    ...this.state.params,
    ...params
}

You are essentially overriding the old offset value with 15 and creating a new object. So essentially, we are NOT spreading over 15 but over {offset:15}

Can't use three dots to import in Reactjs?

use 2dots for two time

"../../anotherComponent/component.js"

discompose javascript react state with three dots, but why we are specifying state and state's attribute separately

The syntax in question is returning a shallow clone of the entire state object, and overriding state.basket with a value of newBasket.

return {
  ...state,
  basket: newBasket
}

For example:

const state = {
  basket: [],
  total: 0,
  user: null,
};

const stateClone = {
  ...state,
  basket: ['apple']
};

stateClone is now { basket: ['apple'], total: 0, user: null } - AND it's a new object in memory.

The clone is necessary in order for the reducer to work properly, since reducers depend on immutable state. The mutable way to update state.basket would be:

state.basket = newBasket;
return state;

However this mutates the original state object, updating the reference in memory rather than creating a copy. This will cause the reducer to work incorrectly (e.g. it won't detect that the state has changed).

Here are the MDN docs on the spread operator when cloning an object: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals

---

Related Topics