Last active
March 17, 2019 20:58
-
-
Save manivelarjunan/2c63b49aacb03bf5f09b19bd43f94d57 to your computer and use it in GitHub Desktop.
Class 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, { 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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment