Class based component

App.js

import React, { Component } from 'react';
import Person from './Person/Person';
import './App.css';

class App extends Component {
  state = {
    persons: [
      {name:'mani',age:45},
      {name:'papi',age:34}
    ]
  }

  switchNameHandler = () => {
    console.log('switch clicked');
    
    this.setState({persons: [
      {name:'manivel',age:45},
      {name:'t bag',age:34}
    ]});
 //  React hooks 
  }
  render() {
    return (
      <div className="App">
       <h1>Hi, I am a React App</h1>
       <Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
       <Person name={this.state.persons[1].name} age={this.state.persons[1].age}> and my hobbier are:studying </Person>
      <button onClick={this.switchNameHandler}> Click me</button>
      </div>
    );
    
   //return React.createElement('div',{className:'App'}, React.createElement('h1',null,'Hi, I am mannie'));
  }
}

export default App;

// Class based component: (Manage the state of the application)
// set state only available only on class based component
// Class based component extends class key word and extends Component
// This is the earlier version of React 16.8, Component is the only way of managing the state.