Update component on props change

Question

I am trying to create a shopping cart, that displays a number of saved items. For this purpose I created a navbar that displays a shopping cart and a number. I am giving the prop amount to the Navbar. The prop amount is the number I want to display next to the cart. When I update amount the number should change but it doesn't.

I tried to update it by using useEffect like this:

const Navbar = ({amount}) => {
  const [safedItems, setSafedItems] = useState(0);

  useEffect( () => {
    setSafedItems(amount)
    console.log(amount)

  }, [amount])

  return (
    <>
      <nav className={styles["nav-bar"]}>
        <a href="/" >
          <h2>Upcoming events</h2>
        </a>
        <SearchBar placeholder='Search for an event' />
        <a href="/calendar">
          <div className={styles["nav-bag"]}>
            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" className="bi bi-cart3" viewBox="0 0 16 16"  >
              <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
            </svg>
            <span className={styles['bag-quantity']}>
              <span>
                {safedItems}
              </span>
            </span>
          </div>
        </a>
      </nav>
    </>
    
  )
}

but it is not working. What do I need to change, so the navbar updates?

EDIT

here is how I set my amount

const [safedIds, setSafedIds] = useState(null)

function addSafedId (id) {
    if(safedIds !== null){
      if(!safedIds.includes(id)){
        let temp = safedIds;
        temp.push(id);
        setSafedIds(temp)
      }
    } else setSafedIds([id]);  
    console.warn(safedIds)
  }

and the return statement

      <Navbar amount={safedIds&&safedIds.length} />

Answer 1

in this bloc of code

 const [safedItems, setSafedItems] = useState(0);

 useEffect( () => {
 setSafedItems(amount)
 console.log(amount)

 }, [amount])

you are passing "amount" as second argument to useEffect, but "amount" do not change in your code then useEffect will not re-render the component.

try to remove useEffect bloc of code and this code " const [safedItems, setSafedItems] = useState(0);"

Then assign "amount" value directly to the tag like this

 <span className={styles['bag-quantity']}>
          <span>
            {amount}
          </span>
        </span>

Answer 2

Does the amount variable use useState in your other component where NavBar is used?

If not, use it. Your amount is probably changed but the page is never re-rendered. The use of useEffect and useState is useless in your NavBar component, you just need to pass the amount directly to the span like Adel Benyahia suggested:

<span className={styles['bag-quantity']}>
   <span>
      {amount}
   </span>
</span>

Answer 3

In your parent component change this line of code

 <Navbar amount={safedIds&&safedIds.length} />

To

<Navbar amount={safedIds} />

Then in your Navbar component

const {amount} = props
return (<span>{amount&&amount.Length}<span>)