Question

The elements in my

aren t being displayed on the browser nor in the elements section in the inspect. Only my tags show up in the browser when I inspect the page. Also, the value of total doesn t show up either. However, the items in the birdInCart do exist because when I console.log I can see the items in the array. Why isn t the result from my map function being rendered to the page?

Here is my code:

Cart.js file:

export default function Cart({ birdInCart, total }) {
    return (
        <div className="cart">
            <h2>Shopping Cart</h2>
            <ol>
                {birdInCart?.map((bird)=> ( 
                    <li key={bird.id}>
                        <p>{bird.name}: {bird.amount}</p>
                    </li>
                ))}
            </ol>
            <h4>Cart Total: ${total}</h4>
        </div>
    )
}

App.Js file:

import { useState } from "react";
import BirdCard from "./components/BirdCard";
import Cart from "./components/Cart";

function App() {
  const [birdInCart, setBirdInCart] = useState([]);
  const [total, setTotal] = useState(0);

  const addToCart = (bird) => {
    const birdCartItem = {
        id: Math.random(),
        name: bird.name,
        price: bird.amount,
        image: bird.image,
    };
    //setBirdInCart(birdInCart.push(birdCartItem)) - this is not going to work because the push method returns the new length of an array & not the update array. Instead I have to use the spread operator

    setBirdInCart([...birdInCart, birdCartItem]);
    setTotal(total + birdCartItem.amount);
    console.log("it works")
    console.log(birdInCart)
  }


  return (
    <>
      <header>
        <h1>Noni s Bird Sanctuary</h1>
      </header>
      <BirdCard addToCart={addToCart}/>
      <Cart addToCart={addToCart}/>
    </>
  )
}

export default App;

I tried adding a return and nothing changed. I also console.log the array to check if it is empty. Array is not empty.

Answer 1

Welcome to stackOverflow so you have applied the ternary operator wrong. If you are trying to iterate over birdInCart array trying doing as following:-

edited

 {birdInCart?({birdInCart.map((bird)=> ( 
 <li key={bird.id}>
 <p>{bird.name}: {bird.amount}</p> </li> ))}):
 <p>there is nothing to show</p>}

also by the given code add this to cart components props

<Cart addToCart={addToCart} birdInCart={birdInCart} total=total/>

and use these as props accordingly. Hope it helps.

友情链接