Build Applications with Meteor

Adding state to a stateless function component

What is a state in React's components?

Components can be declared as pure JavaScript functions, and they are called Stateless, such as this one:

function Greeting({ hello }) {      return <div>{hello}</div>;}

Alternatively, you can write the preceding code as an ES6 arrow function:

const Greeting = ({ hello }) => (    <div>{hello}</div>)

Every component can hold internal encapsulated data, and we call this a state of the component. If you want to add a state to a stateless component, you should define it as an ES6 class.

Before adding an ES6 constructor and super methods to the stateless components, we can overview what an ES6 constructor is and what the super method does in ES6 classes.

In ES6, ...