ReactJS State

ReactJS State

State is the location from which the data originated. We should also try to make our state as simple as possible and minimize the number of stateful components. For example, if we have ten components that need state data, we will build one container component that will hold all of them in state.

Using State

The following sample code shows how to use EcmaScript2016 syntax to create a stateful component.

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
    
      this.state = {
         header: "hey...",
         content: "How are you..."
      }
   }
   render() {
      return (
         <div>
            <h3>{this.state.header}</h3>
            <h3>{this.state.content}</h3>
         </div>
      );
   }
}
export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App /<, document.getElementById('app'));