React: Getting undefined using async function

Question

I got the last question closed as duplicate... I'm clearly using async/await

I'm trying to fetch data from api and pass it to state, companies is array of object and I'm getting error undefined of id at <p>{companies ? console.log(companies[0].id) : ""}</p> and I cant figure out why

import './App.css';
import React, { useState, useEffect } from "react";
import Navigation from './Components/Navigation'
import axios from 'axios'


const App = () => {


  const [companies, setData] = useState({});

  async function fetchData() {
    const urlcompanies = "http://localhost:8000/data-companies/";
    const response = await fetch(urlcompanies);
    const data = await response.json();
    setData(data)  
  }

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

  
    

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
         <p>{companies ? console.log(companies[0].id) : ""}</p>
         <Navigation companydata = {companies} /> 
        <a
        
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

codemonkey · Accepted Answer · 2021-02-02 20:06:45Z

1

Change this

const [companies, setData] = useState({});

to

const [companies, setData] = useState(null);

Otherwise, on first render you're trying to access the first element of what you assume will be an array, which does not get set until after you call that async function.

This

{companies ? console.log(companies[0].id) : ""}

Will print "" on first render, and then, once you set your companies variable to an actual array, you will see the id of your first element.

edited Feb 2, 2021 at 20:06

answered Feb 2, 2021 at 20:01

codemonkey

7,9655 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jcklopp · Accepted Answer · 2021-02-02 20:07:00Z

1

Try:

const [companies, setData] = useState()

instead of

const [companies, setData] = useState({})

answered Feb 2, 2021 at 20:07

jcklopp

4916 silver badges11 bronze badges

1 Comment

codemonkey Over a year ago

Please explain why this change may improve the OP's outcome.

Adel Stiti · Accepted Answer · 2021-02-02 20:10:06Z

1

Update initial state

const [companies, setData] = useState({});

to

const [companies, setData] = useState([]);

and change this

<p>{companies ? console.log(companies[0].id) : ""}</p>

to this

<p>{companies.length ? console.log(companies[0].id) : ""}</p>

answered Feb 2, 2021 at 20:10

Adel Stiti

589 bronze badges

Collectives™ on Stack Overflow

React: Getting undefined using async function

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related