CODEWITHSUNDEEP
jsonreactjsbackend
tallpotato
tallpotato

Reputation: 153

Not sure how to display backend data in react app

I have data that shows up as following in my backend server-

enter image description here

I want to show this data as frontend.
I did it the following way-

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('datas')
    console.log(data)
  }, [] )
  return (
    <div className="App">
        {
        data.map((data,i) => {
        <h1>
          Edit {data.name} and save to reload.
        </h1>
      })
    }
    </div>
  );
}

export default App;

This data is being console logged in the background, but it won't show up in the frontend app.

enter image description here

How would I have the backend data display here?

Upvotes: 0

Views: 213

Answers (1)

Risina
Risina

Reputation: 244

You need to either return the element

 data.map((data,i) => {
   return (
    <h1>
      Edit {data.name} and save to reload.
    </h1>
   )
 })

Or use parentheses

data.map((data,i) => (
  <h1>
    Edit {data.name} and save to reload.
  </h1>
));

Upvotes: 1

Related Questions