How to use useState hook to map JSON response from API

Question

My API returns complex json like these.

[ 
 {id: 1, pub_date: "2021-01-06T20:24:57.547721Z"},
 {id: 2, pub_date: "2021-01-06T20:24:57.547721Z"},
 {id: 3, pub_date: "2021-01-06T20:24:57.547721Z"}
]

So my trial is like this

const [result, setResult] = useState({});
const [result, setResult] = useState(null);
const [result, setResult] = useState([]);

useEffect(() => {
  axios.get('http://localhost:8000/api/results/')
  .then(res=>{
    console.log(res.data); // correctly received
    setResult(res.data); // error
    console.log(result); // nothing appears
  })
  .catch(err=>{console.log(err);});
}, []);

However for any try, it shows the error like

Error: Objects are not valid as a React child (found: object with keys {id, pub_date}). If you meant to render a collection of children, use an array instead.

I have some trial and errors.

There is still difficult behaiver to understand.

  const [cnt,setCnt] = useState(0);

  useEffect(() => {
    axios.get('http://localhost:8000/api/results/')
  
    .then((res)=> {
 
      setCnt(2);
      console.log(cnt);//shows 0

    })
    .catch(err=>{console.log(err);});
  }, []);

why setCnt is not workd?? I am more confused......

Declaring `result` and `setResult` multiple times would likely fail anyway, but the error you're getting has nothing to do with the code shared. It's likely that you've returned `result` directly within JSX, instead of rendering the result data as valid React elements. — Emile Bergeron, Jan 08 '21 at 17:13
I commented out other two lines, and try 3 times. and I added line `console.log(result); ` in article it shows `undefined` — whitebear, Jan 08 '21 at 17:29

score 5 · Answer 1 · answered Jan 08 '21 at 17:16

5

This error comes from your JSX render, where you're certainly trying to display directly your datas from API

useEffect(...)
...

return (
  <ul>
    { 
      result.map(r => (
          <li key={r.id}>{r.id} - {r.pub_date}</li>
      ))
    }
  </ul>
)

answered Jan 08 '21 at 17:16

dbuchet

1,561
1
5
7

I tried but error `TypeError: result.map is not a function` – whitebear Jan 08 '21 at 17:25
1

@whitebear initialize the state with an array to begin with: `const [result, setResult] = useState([]);` – Emile Bergeron Jan 08 '21 at 17:26
I guess variable is not stored correctly in `result`? I tested `console.log(result)`; in `useEffect()`. – whitebear Jan 08 '21 at 17:26
@whitebear `setResult` is asynchronous. See: [useState set method not reflecting change immediately](https://stackoverflow.com/q/54069253/1218980) – Emile Bergeron Jan 08 '21 at 17:31
Thank you very much. I solved the problem for now. I need to understand more about async. – whitebear Jan 08 '21 at 18:37

score 2 · Accepted Answer · answered Jan 08 '21 at 17:36

If you are calling setResult(res.data), then your result state should be of type [].

import React, { useEffect, useState } from "react";

const fetchData = () =>
  Promise.resolve({
    data: [
      { id: 1, pub_date: "2021-01-06T20:24:57.547721Z" },
      { id: 2, pub_date: "2021-01-06T20:24:57.547721Z" },
      { id: 3, pub_date: "2021-01-06T20:24:57.547721Z" }
    ]
  });

const ListItem = ({ id, pub_date }) => (
  <li>
    {id} &mdash; {pub_date}
  </li>
);

const ListItems = ({ items }) => (
  <ul>
    {items.map((props) => (
      <ListItem key={props.id} {...props} />
    ))}
  </ul>
);

const App = () => {
  const [result, setResult] = useState([]);

  useEffect(() => {
    fetchData().then((res) => {
      setResult(res.data);
    });
  }, []);

  return (
    <div className="App">
      <ListItems items={result} />
    </div>
  );
};

export default App;

I solved with this. may be I made many missunderstanding – whitebear Jan 08 '21 at 18:36 — whitebear, Jan 08 '21 at 18:36

How to use useState hook to map JSON response from API

2 Answers2