How to setState false when a component rendered? - RN

user_16380621 0
Viewed 169

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?

enter image description here

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

react-native javascript
2 Answers

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.

user_83812810

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;
user_114471380
Related