How to change state value in const mode? - react-native

Question

I am a beginner in React-Native.
I tried to change the state value.
But it seems different with "class" mode. Now I am using "const" mode.
In const mode, how can I change the state value?
import React from "react";
import {
View,
Text,
Image,
TouchableOpacity
} from "react-native";
const Product = props => {
this.state = {
checkIconURL : require('../../assets/ic_check_circle.png')
}
set = () => {
this.setState({ checkIconURL : require('../../assets/empty.png') }) //But this lines gives err.
}
return (
<View>
<Text style={{ fontSize: 16}}>Everyday</Text>
<TouchableOpacity onPress = {this.set}>
<Image source = {this.state.checkIconURL} style={{width: 30, height: 30}} />
</TouchableOpacity>
</View>
)
}

Answer 1

state is not available in function components, this.state and this.setState() can only be used in class component, u have to use useState hook from react to use the state...
import React ,{ useState } from "react";
import {
View,
Text,
Image,
TouchableOpacity
} from "react-native";
const Product = props => {
const initialState = require('../../assets/ic_check_circle.png');
const [iconUrl, setIconUrl ] = useState(initialState);
const set = () => {
const emptyImageUrl = require('../../assets/empty.png')
setIconUrl(emptyImageUrl);
}
return (
<View>
<Text style={{ fontSize: 16}}>Everyday</Text>
<TouchableOpacity onPress = {set}>
<Image source = {iconUrl} style={{width:
30, height: 30}} />
</TouchableOpacity>
</View>
)
}

Answer 2

the following code is incorrect as you need to use Hook in a functional component to manage state.
React provides the useState hook to manage state in a functional component.
import React ,{ useState } from "react";
import {
View,
Text,
Image,
TouchableOpacity
} from "react-native";
const Product = props => {
const initialState = require('../../assets/ic_check_circle.png');
const [ state,setState ] = useState({checkIconURL: initialState});
set = () => {
const emptyImageUrl = require('../../assets/empty.png') });
setState({...state, checkIconURL: emptyImageUrl })
}
return (
<View>
<Text style={{ fontSize: 16}}>Everyday</Text>
<TouchableOpacity onPress = {this.set}>
<Image source = {this.state.checkIconURL} style={{width:
30, height: 30}} />
</TouchableOpacity>
</View>
)
}