Last active
March 17, 2019 20:59
-
-
Save manivelarjunan/f7303f6c3f031764f499115cb5bed4ce to your computer and use it in GitHub Desktop.
React hook - functional based component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment