react this setstate code example
Example 1: react native class component constructor
import React from 'react';
import { View, TextInput } from "react-native";
class App extends React.Component {
constructor(props){
super(props);
this.state = {
name: ""
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(text){
this.setState({ name: text })
console.log(this.props);
}
render() {
return (
<View>
<TextInput
value={this.state.name}
onChangeText={(text) =>this.handleChange(text)}
/>
</View>
}
}
export default App;
Example 2: state with react functions
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Example 3: state with react functions
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
Example 4: setstate react js
constructor(props) {
super(props);
this.state = {
isActive: true,
};
}
checkStatus = () => {
this.setState({
'isActive' : !this.state.isActive,
});
}
Example 5: lifecycle method react
INITIALIZATION= setup props and state
MOUNTING= constructor->componentWillMount->render->componentDidMount
UPDATE= shouldComponentUpdate->componentWillUpdate->render
->componentDidUpdate
UNMOUNTING= componentWillUnmount
Example 6: setstate in react
Functional Component
const [counter, setCounter] = useState(0);
setCouter(counter + 1);