0
202
ViewsHow to setState false when a component rendered? - RN
I am new to application development. As seen below when "value" is false, I want the "Test" component to be rendered and the loading state to be false. But when I do as in the codes below, I get the error in the picture below. How do I set state to false without getting an error when this test component is rendered on the page?
import React, { useState } from 'react'
import { Text, View } from 'react-native'
const WordPage = () => {
let value = false
const [loading, setLoading] = useState(false)
const Test = () => {
setLoading(false)
return (
<Text>OFFLINE</Text>
)
}
return (
<View>
{value ?
<Text>ONLINE</Text>
:
<Test />
}
</View>
)
}
export default WordPage
·
Juan Pablo Isaza
2 answers
Answer question0
You should be using the useEffect hook for this. useEffect is used for running side effects and runs after the component has rendered.
Also, you don't need this additional component. You can simply use the useEffect hook in your parent component.
·
Juan Pablo Isaza
Report
0
You can pass a callback as prop and call it once Test component is rendered.
import React, { useEffect, useState } from "react";
import { Text, View } from 'react-native'
const Test = ({ onRendered }) => {
useEffect(onRendered, []);
return <Text>OFFLINE</Text>;
};
const WordPage = () => {
let value = false;
const [loading, setLoading] = useState(false);
return (
<View>
{value ? (
<Text>ONLINE</Text>
) : (
<Test
onRendered={() => {
setLoading(false);
}}
/>
)}
</div>
);
};
export default WordPage;
·
Juan Pablo Isaza
Report
Answer question