I am using the following code for fetching and passing data from firestore. there are four data in my firestore collection. I am able to fetch all four of them, (i checked this on console), but in NewRecipe component only the first data is getting passed as props. not sure why the other three data not getting passed as props.

this is component where i am fetching data :

const Home = () => {
  


  const [data, setData] = useState(null);
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    setIsPending(true);

    projectFirestore
      .collection("recipes")
      .get()
      .then((snapshot) => {
        if (snapshot.empty) {
          setError("No recipes");

          setIsPending(false);
        } else {
          let result = [];
          snapshot.docs.forEach((doc) => {
            result.push({ id: doc.id, ...doc.data() });

            setData(result);
            setIsPending(false);
          });
        }
      })
      .catch((e) => {
        setError(e);
      });
  }, []);

  console.log("data", data);

  return (
    <div>
      {error && <div className="errors">{error}</div>}
      {isPending && <div className="Loading">Loading.......</div>}
      {data && <NewRecipe data={data} />}
    </div>
  );
};

export default Home;

this is NewRecipe component where I am receiving props

const NewRecipe = ({data}) => {

    console.log("data new recipe", data)


    return (
        <div className='recipe_list'>
 
        {data.map((item)=>{
            return (

            <div key={item.id} className='card'>
                <h3>{item.title}</h3>
                <p>it takes around {item.cookingTime}</p>
                <p>{item.method.substring(0,100)}</p>
                <Link to={`/recipes/ ${item.id}`}className='btn'> Read more</Link>
            </div>
        )})}
            
        </div>
         )
}

CodePudding user response：

Try to place setPending(false) outside (just after) the forEach block.