Compose React Component Behavior with Higher Order Components

it'd be cool if you can explain a bit more on the spread operator, had a look at react's doc, was not very clear

The spread operator is an ES6 feature, not a React feature. It's a direct way to access a collection as an iterable. So if you had an array like let myArray = [0, 1, 2, 3] you can access every element with the spread operator. console.log(...myArray) would output 0 1 2 3. Math.max(...myArray) would output 3. Please let me know if my explanation was any good.

I also do not understand the use of the spread operator in there. how does this translate into an components attribute if these are basically just values?

Does

return <InnerComponent
      {...this.state}
     />

becomes to something like

<InnerComponent val="3"/>

?

Exactly. You could achieve the same thing like this:

return <InnerComponent val={this.state.val} txt={this.props.txt}   />

what if the component has a state called "val": this.state = {val: '0'}, and also has a prop called "val": this.props.val = '1'. Is React smart enough to carry over same name state and props when using spread operator?

No, React is not going to differentiate between two values for 'val' passed into a components props. This is not a React-specific issue, it's just something you shouldn't do in JS in general. The outcome will be that the last one passed in will win.

What’s the advantage of composing React components with a higher order component as opposed to class inheritance? If there is functionality that we wanted both the Label and Button to have, couldn’t we also have them both inherit from some other component?

What text editor is he using?