how to load a component after useEffect is rendered

Question

I am using the npm package react-form-builder2.

const [stateform, setstateform] = useState([]);

useEffect(() => {
      axios
        .get(
          `${server}/api/getservice/6`,
          { headers }
        )
        .then((response) => {
          if (response.data[0].intakeForm) {
            setstateform(JSON.parse(response.data[0].intakeForm));
          }
        })
        .catch((error) => {
          console.log(error);
        });
    }
  }, []);

console.log("stateform", stateform); // [{id: "0DA5756A-BDF4-4D57-97CD-5F173361C29E", element: "Label", text: "Label", static: true, required: false}]

<ReactFormBuilder
    data={stateform}
    onPost={(e) => change(e)}
/>

But the data inside ReactFormBuilder is not rendered as the useEffect was not loaded initially. How do i reload the ReactFormBuilder after the useEffect is rendered?

Answer 1

I guess you're looking for something like this:

const [stateform, setstateform] = useState([]);
const [loadingState, setLoadingState] = useState('not_loaded'); // not_loaded | loading | loaded | error

useEffect(() => {
      setLoadingState('loading')
      axios
        .get(
          `${server}/api/getservice/6`,
          { headers }
        )
        .then((response) => {
          setLoadingState('loaded');
          if (response.data[0].intakeForm) {
            setstateform(JSON.parse(response.data[0].intakeForm));
          }
        })
        .catch((error) => {
          setLoadingState('error');
          console.log(error);
        });
    }
  }, []);

{loadingState === 'not_loaded' && 'whatever you want to be here'}
{loadingState === 'loading' && 'loading'}
{loadingState === 'error' && 'something went wrong'}
{loadingState === 'loaded' && (
  <ReactFormBuilder
    data={stateform}
    onPost={(e) => change(e)}
  />
)}