React Hook useState()

import React, { useState } from 'react';import './App.css';import Person from './Person/Person';persons: [{name: "Ali Bener", age: 43 },{name: "Arslan Eksi", age: 36 }, 
//The second element is array function allow us to update this state
{name: "Levent Mergen", age: 74 }
//such that React is aware of it //and will re-render this componentlinr
],otherState: ' some other value'
//The second element is array function allow us to update this state //such that React is aware of it and will re-render this.
});

Importing { useState } from React Library

(useState({})-> 
(const [] = useState()
[personsState]
{this.state.persons[1].name}//instead {personsState.persons[1].name} //We can access person data and
onClick={switchHandler} instead onClick={this.switchHandler} referring to content here const switchHandler = () => {
const [personsState, setPersonState]
import React, { useState } from 'react';import './App.css';import Person from './Person/Person';persons: [{name: "Ali Bener", age: 43 },{name: "Arslan Eksi", age: 36 },           <--------     The second element is array function allow us to update this state{name: "Levent Mergen", age: 74 }                        such that React is aware of it and will re-render this componentlinr(line 50-57)],otherState: ' some other value'  
//The second element is array function allow us to update this state
});const [personsState, setPersonState] = useState({ persons: [ {name: "Ali Bener", age: 43 }, {name: "Arslan Eksi", age: 36 }, {name: "Levent Mergen", age: 74 } ],});const [otherState, setPersonsState] = useState ('some other value') console.log(personsState, otherState)const switchHandler = () => { setPersonState({ persons : [ {name: "Erkan Togan", age: 49 }, {name: "Ceren Ates", age: 40 }, {name: "Nevriye Yilmaz", age: 40 }],otherState : personsState.otherState });};return ( <div className="App"> <h1> LEGENDS LIST </h1> <p>This is really working </p> <button onClick={switchHandler}> Switch Name</button> <Person name={personsState[0].name} age={personsState[0].age} /> <Person name={personsState[1].name} age={personsState[1].age}> My Hobbies: Voleyball</Person> <Person name ={personsState[2].name} age={personsState[2].age} /> </div> );}export default App;
//we also made const app with lowercase

According to Reactjs.org about Hooks

Summary

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Soner Mezgitci

Soner Mezgitci

31 Followers

Software Engineer | Ruby on Rails | JavaScript | HTML5 | CSS | PostgreSQL | React | Redux