What should I do to successfully map data from axios API?

Question

How do I map out the data I've put in my console/state? I've been trying to add a map function where I left the "//m", and it seems like it should be simple enough but I can't seem to do it properly.

 import React, { useState, useEffect } from "react"; 
 import axios from "axios"; 
 import EmployeeDetail from "./EmployeeDetail";

 function App() {
    const [employees, setEmployees] = useState([]);
    const [loading, setLoading] = useState(false);
    useEffect(() => {
                       setLoading(true);
                       axios.get("https://randomuser.me/api/?results=10&nat=us")
                            .then(res => { 
                                            console.log(res.data.results);
                                            setEmployees(...res.data.results);
                                            setLoading(false);
                                         })
                            .catch(err => {
                                            console.log(err);
                                          });
                    }, []); 
        
return ( 
  <div className="App"> 
  <h1>Employee List</h1>  
  //m
  </div>
);
}
export default App;

I was able to make it using the API the guy in the youtube video I referenced used ("https://restcountries.eu/rest/v2/all") with the following function:

   {countries.map((country) => (
<div key={country.name}> 
{country.name} - {country-capital}
</div> 
))}

I'm just having problems with doing it with my own API.

score 0 · Answer 1 · answered Jan 23 '21 at 01:57

From your question it seems you are looking for rendering a table of output data from an API call.

When you call setEmployees(), react application will refresh the page using virtual DOM as you are setting a state using react hooks mechanism.

return(){
   <div className="App"> 
      <h1>Employee List</h1>  
         <table>
           <thead>
              // your table headers
           </thead>
           <tbody>
                 {this.employees.map((item, index) => {
                                                       <tr>
                                                          <td>{item.value1}</td>
                                                          <td>{item.value2}</td>
                                                          // as per your requirement
                                                       </tr>  
                                                      })}
           </tbody>
         </table>       
  </div>
}

One more thing you can do is, create a function and return JSX from function.

Please visit below link for creating function and returning JSX.

How to loop and render elements in React.js without an array of objects to map?

score 0 · Answer 2 · answered Jan 23 '21 at 02:04

You can use map as you want.

return ( 
  <div className="App"> 
    <h1>Employee List</h1>  
    <ul>
      {
        emplyees.map((employee) =>
          <li>{employee.name}</li>
        );
      }
    </ul>
  </div>
);

There is a detailed document that you could follow step by step here

What should I do to successfully map data from axios API?

2 Answers2