…props

We can quickly replicate the attributes list of the parent component with the ES6 shorthand syntax '...props'.

RESETRUNFULL

function Sentence(props){
    return <h1 {...props}>Hello World!</h1>}class Demo extends React.Component {
  render() {
    return (
      <Sentence style={{color:'red'}} contentEditable title="My Sentence"/>
    );
  }}ReactDOM.render(<Demo />, document.querySelector("div"));

function Sentence(props){
    return <h1 {...props}>Hello World!</h1>}class Demo extends React.Component {
  render() {
    return (
      <Sentence style={{color:'red'}} contentEditable title="My Sentence"/>
    );
  }}ReactDOM.render(<Demo />, document.querySelector("div"));

Likewise, we can merge CSS styles with the spread operator:

RESETRUNFULL

<button style={{...styles, ...style2}}>Back</button>

<button style={{...styles, ...style2}}>Back</button>

MENU

…props