I'm new to reactjs, I want to fetch and display data from my database table in a react page ,i wrote a code following a tutorial but i don't know how to correct it. This is the data :

and this is the code i'm writing

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

function Companies() {
   const [companies, setCompanies] = useState(initialState: [])

   useEffect( effect: () => {
      companydata()
      },   deps: [])

   const companydata = async () => {
      const {data}= await axios.get("http://localhost:5000/api/v1/companies");

      setCompanies(data);
   }

   return (
      <div className="companies">
         {companies.map(companies => (
         <div key={companies.CompanyId}>
            <h5>{companies.CompanyName}</h5>
            </div>
            ))}

      </div>
   );
         }

export default Companies;

CodePudding user response：

useEffect( effect: async () => {
      await companydata()
      },   deps: [])

have you tried adding async and await inside useEffect hook

CodePudding user response：

Try to change your code like this:

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

function Companies() {
  const [companies, setCompanies] = useState([]);

  useEffect(() => {
    companydata();
  }, []);

  const companydata = async () => {
    const { data } = await axios.get('http://localhost:5000/api/v1/companies');
    setCompanies(data);
  };

  return (
    <div className='companies'>
      {companies.map((comp) => (
        <div key={comp.CompanyId}>
          <h5>{comp.CompanyName}</h5>
        </div>
      ))}
    </div>
  );
}

export default Companies;