How to rerender component, using useEffect and useState?

I’m trying to show a table in my react component, but i don’t know how to use useEffect and useState to render table in first render.

My component js:

import React, { useEffect, useState } from 'react'

const Projects = () => {
  const [tableData, setTableData] = React.useState()

  useEffect(() => {
    fetch('') //получение информации из API гугла
        .then((response) => response.json()) //изменения формата в JSON
        .then((response) => {
          //запись значения JSON в переменную tableData
          console.log('Response in useEffect:')
          console.log(response['smr'])     // data is OK
          console.log('tableData in useEffect:')
          console.log(tableData)           // data is undefined
  }, []);     

  return (
    {/* { => {
      <div key={}>
    })} */}

export default Projects

and i also use Routing in index.js:

const root = ReactDOM.createRoot(document.getElementById('root'));
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <App />

>Solution :

Provided that your request completes sucesssfully, you can conditionally render the component like this"

 return (
    {tableData && => 
      (<div key={}>

This way, the component only renders when tableData is not falsey (ie null or undefined).

Leave a Reply