Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

168
Visualizações
I want to fetch data and display it in a react page

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 : enter image description here

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;

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

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

have you tried adding async and await inside useEffect hook

about 4 years ago · Juan Pablo Isaza Relatório

0

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;
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda