CODEWITHSUNDEEP
javascriptreactjs
alittlecurryhot
alittlecurryhot

Reputation: 497

API data not appearing in component but shows in console

I am making a rather simple API call to (https://api.punkapi.com/v2/beers) and displaying fetched data in the component, but somehow the data is not getting displayed on the page, but when I console log it the data is displayed correctly.

const Comp= () => {
  const [item, setItem] = React.useState([]);

  React.useEffect(() => {
    fetch('https://api.punkapi.com/v2/beers')
      .then((res) => res.json())
      .then((data) => {
        setItem(data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  return (
    <div>
      {item.map((beer) => {
        const { name, tagline } = beer;
       
          <p>{name}</p>;
 
        console.log(name);
      })}
    </div>
  );
};

Upvotes: 1

Views: 731

Answers (3)

Drew Reese
Drew Reese

Reputation: 202864

Issue

You don't return anything from your item mapping. Return the JSX you want to render (i.e. return <p>{name}</p>) and don't forget to add a React key to the mapped elements. Below I've simplified to an implicit return.

You should also remove the console log from the render return as "render" methods are to be pure functions without side-effects, such as console logging. Either log the fetch result in the promise chain or use an useEffect hook to log the updated state.

useEffect(() => console.log(item), [item]);

...

return (
  <div>
    {item.map(({ id, name }) => (
      <p key={id}>{name}</p>
    ))}
  </div>
);

Edit api-data-not-appearing-in-component-but-shows-in-console

Upvotes: 1

Near
Near

Reputation: 447

You need to return the JSX elements in your map.

   const Comp= () => {
  const [item, setItem] = React.useState([]);

  React.useEffect(() => {
    fetch('https://api.punkapi.com/v2/beers')
      .then((res) => res.json())
      .then((data) => {
        setItem(data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  return (
    <div>
      {item.map((beer) => {
        const { name, tagline } = beer;
       
         return <p>{name}</p>;
 
        console.log(name);
      })}
    </div>
  );
};

Upvotes: 0

Sajib Khan
Sajib Khan

Reputation: 24176

You need to return the value from inside .map method like:

return (<p>{name}</p>)

Upvotes: 1

Related Questions