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

//class App extends Component {
  const app = props => {
  const [personsState,setPersonState] =  useState({
    persons: [
      {name:'mani',age:45},
      {name:'papi',age:34}
    ]
  });


  const [otherState,setOtherState] = useState({otherState:' other state'})

  console.log(personsState,otherState);

  const switchNameHandler = () => {
    console.log('switch clicked');

    setPersonState({
      persons: [
        { name: 'manivel', age: 45 },
        { name: 't bag', age: 34 }
      ]
    });

  //  React hooks, manipulate the state in functions.
  };

  //render() {
    return (
      <div className="App">
       <h1>Hi, I am a React App</h1>
       <Person name={personsState.persons[0].name} age={personsState.persons[0].age}/>
       <Person name={personsState.persons[1].name} age={personsState.persons[1].age}> and my hobbier are:studying </Person>
      <button onClick={switchNameHandler}> Click me</button>
      </div>
    );

   //return React.createElement('div',{className:'App'}, React.createElement('h1',null,'Hi, I am mannie'));
  //}
};

export default app;

// Functional based component: ( After react 16.8) - React hooks
// React hook defination: Collection of function exposed by react to used to mange the state.
// It will not have render
// import {useState} - Manage the state in function component
// Use state uses the state and returs the exactly two elements.
// First element is current state, second state is always update state to re-render the element
// set person allows to set the state.
// Notice that functional component allows function with in a function.
// call the setPerson to set the state.
// extract the state, updating the state and rerending the state.
// use usestate to merge the old state Object/value automatically.