fetching problems with react useEffect

Question

i got this error fetching data just for practice i don't wanna use JSON.stringfy i don't think will be good practice, solve it with details please thank you

Error: Objects are not valid as a React child (found: object with keys {title, episode_id, opening_crawl, director, producer, release_date, characters, planets, starships, vehicles, species, created, edited, url}). If you meant to render a collection of children, use an array instead.

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

function App() {
  const [data, setData] = useState([]);
  useEffect(() => {
    const fetching = async () => {
      const response = await fetch('https://swapi.dev/api/films')
      const { results } = await response.json();
      const transformedData = results.map((el) => {
        return {
          id: el.episode_id,
          title: el.title,
          text: el.opening_crawl,
          date: el.releaseDate
        };
      });
      setData(transformedData);
    }
    fetching();
  })

  const outputedData = data.map((el) => {
    <div>
      <p>{el.id}</p>
      <p>{el.title}</p>
      <p>{el.text}</p>
      <p>{el.date}</p>
    </div>
  })

  return (
    <div className="App">
      {outputedData}
    </div>
  );
}

export default App;


console.log(results)

6) [{…}, {…}, {…}, {…}, {…}, {…}]0: {title: "A New Hope", episode_id: 4......}

How do you want to display it then? We can't really design your app for you! — Nick
– Nick, Commented Aug 1, 2021 at 17:26
Also, I recommend adding a dependency array to your useEffect hook or you're going to trigger infinite fetches — Nick
– Nick, Commented Aug 1, 2021 at 17:28
You can't just display an array with objects. You don't want it stringified, so do you want all the properties in each object on new lines, do you want it in a table, etc etc. Can you try something yourself first to give us some idea what you're going for? — Nick
– Nick, Commented Aug 1, 2021 at 17:30

Olivier Boissé · Accepted Answer · 2021-08-01 17:48:52Z

1

You must replace

const outputedData = data.map((el) => {
    <div>
      <p>{el.id}</p>
      <p>{el.title}</p>
      <p>{el.text}</p>
      <p>{el.date}</p>
    </div>
})

by

const outputedData = data.map((el) => (
    <div key={el.id}>
      <p>{el.id}</p>
      <p>{el.title}</p>
      <p>{el.text}</p>
      <p>{el.date}</p>
    </div>
))

Currently, your code doesn't return anything from the map function

Please note the use of the key attribute when displaying an array of React elements

edited Aug 1, 2021 at 17:48

answered Aug 1, 2021 at 17:43

Olivier Boissé

18.5k7 gold badges54 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hspacheco · Accepted Answer · 2021-08-01 17:41:48Z

1

You cannot display an array of non-React elements. You need to do something like

return (
        <div className="App">
           {data.map(({title, episode_id, ...props}) => 
              <div>
                <span>{title}</span>
                <span>{episode_id}</span>
              </div>
           )}
        </div>
    );

answered Aug 1, 2021 at 17:41

hspacheco

1544 bronze badges

Comments

tarzen chugh · Accepted Answer · 2021-08-01 17:57:02Z

1

   <div className="App">
     {data.results.map((result) => {
       <span>{{result.title}}</span>
    })}
    </div>

edited Aug 1, 2021 at 17:57

answered Aug 1, 2021 at 17:33

tarzen chugh

11.3k4 gold badges22 silver badges31 bronze badges

Collectives™ on Stack Overflow

fetching problems with react useEffect

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related