UseState Hook

This goal is to enforce actually creating components as functions, rather than "classes". 

• Functional components cannot have a "state" within them but with use of hook "useState" we can maintain the state inside our functional components.
• Class-based components have a "state" within them but hooks cannot be used in classes.

Please check another post I had posted for the use of "useState" hook.

There are three ways of creating a React component:

1) Functional ("Stateless") Components

const FirstComponent = props => (
<div>{props.content}</div>
);

2) React.createClass() 

const SecondComponent = React.createClass({
render: function () {
return (
<div>{this.props.content}</div>
);
}
});

3) ES2015 Classes

class ThirdComponent extends React.Component {
render() {
return (
<div> {this.props.content} </div>
);
}
}

These components are used in exactly the same way:

const ParentComponent = function (props) {
const someText = "Wiki Post";
return (
<FirstComponent content={someText} />
<SecondComponent content={someText} />
<ThirdComponent content={someText} />
);
}