React functional component using state

Question

I\'m trying to implement a React smart component using functions as shown here https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlook

Answer 1

Stateless functional components are intended to be presentation-oriented, since they can't have local UI state within themselves. This is great though, because without the ability to have internal state, the use of pure functional components promotes better use of the single responsibility principle through out your app, allowing simpler components each focused on doing less stuff. A win for designing software that becomes less of a headache to maintain and add features to later.

Stateless functional components are passed in state from a Container component and are responsible for rendering the state passed in to them via props from their Container component. This allows the Container component to have a simpler, more focused responsibility for getting and transforming data to pass to the stateless functional components. The pure functional components abstract out the details of rendering JSX from the Container.

So long story, what you want is a container component class so you have can create relevant UI state and manage it in the React lifecycle methods, which you do not have access to in a pure functional component.