React functional component(Uses hooks for state management)

react_functional_component.js

import React, {useState} from 'react';

const App = props => {
  
  const [pstate, sstate] = useState({
      name: "Manoj",
      country: "India"
    })

  const switchNameHandler = () => {
       sstate({
         name: "Arun",
         country: "Japan"
       })
    }

    return(
      <div className="App">
        <h1>Hello</h1>
        <button onClick={switchNameHandler}>Click Here</button>
        <p>{pstate.name}</p>
        <p>{pstate.country}</p>
        <Person name="manoj"/>
      </div>
    )
}

export default App;