Using map function to present the array of objects with bootstrap cards-CodePudding

I'm trying to present the movie api array data in bootstrap cards but it seems that I still don't understand something about react hooks or map functions because I cant get the code right. I get this "TypeError: setTrendingResults.map is not a function" .

My code:

import Hero from './Hero';
import Footer from './Footer';
import { Link } from 'react-router-dom'
import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';

const TrendingCard = ({ trending}) => {
  const trendPosterUrl =`https://image.tmdb.org/t/p/w500${trending.poster_path}`
  const trendDetailUrl = `/movies/${trending.id}`

  return(
    <div className= "col-lg-4 col-md-3 col-2">
  <div className="card" >
  <img src={trendPosterUrl} class="card-img-top" alt={trending.original_title}/>
  <div className="card-body">
    <h5 className="card-title">{trending.original_title}</h5>
    <Link to={trendDetailUrl} class="btn btn-primary">Show details</Link>
  </div>
</div>
</div>
)
}

const TrendingView = (data) => {
  const [trendingResults, setTrendingResults] = useState ([])

useEffect(() => {
fetch('https://api.themoviedb.org/3/trending/movie/week?api_key=776d38251dae661e04c01631cfa95286')
.then(response => response.json())
.then(data =>{
setTrendingResults(data.results)
})
})


  const trendingHtml = setTrendingResults.map((obj, i) => {
  return <TrendingCard trending={obj} key={i} />

  })

  return(
    <div>
<Hero text="Trending"/>
{trendingHtml &&
      <div className="container">
       <div className="row">
       {trendingHtml}
       </div>
       </div>}
    </div>
  );



}

export default TrendingView;

CodePudding user response：

setTrendingResults is used to set the value to trendingResults state. You have to use trendingResults instead of setTrendingResults.

const trendingHtml = trendingResults.map((obj, i) => {
  return <TrendingCard trending={obj} key={i} />
})

CodePudding user response：

Use valid state for mapping a card. trendingResults insted of setTrendingResults.

Here I convert a trendingHtml with React.useMemo which helps to avoid re-render-related stuff.

const TrendingView = (data) => {
  const [trendingResults, setTrendingResults] = useState([]);

  useEffect(() => {
    fetch(
      "https://api.themoviedb.org/3/trending/movie/week?api_key=776d38251dae661e04c01631cfa95286"
    )
      .then((response) => response.json())
      .then((data) => {
        setTrendingResults(data.results);
      });
  });


  const trendingHtml = React.useMemo(()=> trendingResults?.map((obj, i) => {
    return (<TrendingCard trending={obj} key={i} />)
  }),[trendingResults])

  return (
    <div>
      <Hero text="Trending" />
      {trendingHtml && (
        <div className="container">
          <div className="row">{trendingHtml}</div>
        </div>
      )}
    </div>
  );
};

export default TrendingView;