Destroying an object and ignoring one of the results

Question

I have:

const section = cloneElement(this.props.children, {
  className: this.props.styles.section,
  ...this.props,
});

Inside this.props, I have a property stylesthat I don’t want to pass to the cloned element.

How can i do this?

Answer 1

You can use stop / propagate syntax :

// We destructure our "this.props" creating a 'styles' variable and
// using the object rest syntax we put the rest of the properties available
// from "this.props" into a variable called 'otherProps' 
const { styles, ...otherProps } = this.props;
const section = cloneElement(this.props.children, {
  className: styles.section,
  // We spread our props, which excludes the 'styles'
  ...otherProps,
});

, , , , 1 Babel. , :

 npm install babel-preset-stage-1 --save-dev

Babel. , .babelrc:

 "presets": [ "es2015", "react", "stage-1" ]

---

, OP.

, , styles, ? . , .

:

const styles = { foo: 'bar' };

const { styles: otherStyles, ...otherProps } = this.props;
const section = cloneElement(this.props.children, {
  className: otherStyles.section,
  // We spread our props, which excludes the 'styles'
  ...otherProps,
});

Answer 2

ctrlplusb answer, , Object.assign, Babel:

const section = cloneElement(this.props.children, {
    className: this.props.styles.section,
    ...Object.assign({}, this.props, {
        styles: undefined
    })
});

Answer 3

- ...

var newProp = (this.props = {p1, p2,...list out all props except styles});