Not sure how to map and display data in react app

Question

I have data showing up as following in my backend server

I want to show this data in my frontend react app.
I have tried the following so far-

import {useState, useEffect} from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [data,setData] = useState([])
  useEffect( () => {
    fetch("http://127.0.0.1:5000/lang")
    .then(res =>  res.json())
    .then( res => {setData(res)} )
    console.log(data.languages)
  }, [] )
  return (
    <div className="App">
    {
        data.languages.map((data,i) => {
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          {data.languages}
        </a>
      </header>
    })
    }
    </div>
  );
}

export default App;

I am getting the following error upon making this request-

What could I be doing wrong?

Use `.then( res => {setData(res.languages)} )` and `data.map((o,i)` — Hassan Imam, Jun 03 '21 at 18:18

score 0 · Answer 1 · answered Jun 03 '21 at 18:41

You have initialized the data with array and then you are assigning object to it, which is causing error in your code. You can initialize the data with {languages: []} to fix this. Also, you are missing return in your array#map.

const { useState, useEffect } = React;

const result = { languages : [ {name: "Javascript"}, {name: "Python"}, {name: "Ruby"}]};
const apiResponse = () => new Promise(resolve => setTimeout(resolve(result), 1000));

const App = () => {
  const [data,setData] = useState({languages: []});
  
  useEffect(() => {
    apiResponse().then(res => setData(res));
  },[]);
  
  return (
    <div className="App">
    {
        data.languages.map(({name},i) => {
        return (
          <header className="App-header">
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" ><br />
            {name}
          </a>
          </header>
        )
    })
    }
    </div>
  );
 
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

score 0 · Answer 2 · answered Jun 03 '21 at 18:53

Map is array.prototype , so you need to check if data.lenguages is array , and your map function doesn't return anything.

this is returning one div for all elements in array

  array.map(() => <div></div>)

this is returning undefined :

  array.map(() => {<div><div>})

and this is returning div for all elements i array:

  array.map(() => {return <div><div>})

also you need to return single element , wrap all of them in div or in wraper :

  array.map(() => {return ( <>
                        <div>1<div>
                         <div>2<div>
                        <div>3<div>
                        </>
                         )})

Not sure how to map and display data in react app

2 Answers2