What Are These Three Dots in React Doing

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>

{ ...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 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}

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

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.

Javascript Property with three dots (...)

That is not ES6 but has only been added in ECMAScript 2018.

It is called "Object Rest/Spread Properties" and is part of the Spread Syntax.

Angular what's the meaning of these three dots in @NGRX

The three dots are known as the spread operator from Typescript (also from ES7).

The spread operator return all elements of an array. Like you would write each element separately:

let myArr = [1, 2, 3];
return [1, 2, 3];
//is the same as:
return [...myArr];

This is mostly just syntactic sugar as it compiles this:

func(...args);

to this:

func.apply(null, args);

In your case this gets compiled to this:

return [...state, action.payload];
//gets compiled to this:
return state.concat([action.payload]);

---

Related Topics