How to Display JSON data in React

After reading this article you should be ready to make a fetch from some API and display data iteratively.

I've also written on how to make a map function in React

Simple answer

const Clients = () => {
  const data = [
    {
      id: 1,
      name: 'Peter',
      note: 'has a web design agency',
    },
    {
      id: 2,
      name: 'Andres',
      note: 'Beware he has too much money',
    },
  ]
  return (
    <ul>
      {data.map((client) => (
        <li>
          <h3>{client.name}</h3>
          <p>{client.note}</p>
        </li>
      ))}
    </ul>
  )
}
export default Clients

How to import JSON data from an API instead of a local object

Let's go with the Rick & Morty API.

const Characters = () => {
  const [data, setData] = useState([])
  const getData = async () => {
    // uso esta funcion en un useEffect
    const result = await fetch('https://rickandmortyapi.com/api')
    const data = await result.json()
    setData(data)
  }
}

You can go see my other article where I explain in detail how to create a map inside JSX and how to map each character (I use the same scenario).

setData(data)

It is important to you either set your fetched data to an state to then be able to map it through. Or either you could do something more advanced like implementing a reducer or redux, which I don't recommend if you are just starting out.

How to import JSON data from a backend server?

You gotta run two localhosts, one for the frontend and the other one for the backend. And the backend server should provide some API that returns a JSON. Basically, the answer to this question, is that is the same as you would normally do with any API.

Although the following example doesn't show the backend side, it should give you an idea on how you should import data from a backend server:

const url = 'http://localhost:3000/api/data' // localhost:3000 is your backend
const [state, setState] = useState({ data: undefined })
const getData = async () => {
  const response = await fetch(url)
  const JSONdata = await response.json()
  setState({ data: JSONdata })
}