score:1

That because your {cart} is an array of object. So instead of render it like that, you need to enclosed them in some sort of .map or something: -

<div className="my-4">
  <Container>
    <h4>Test Component</h4>
    {cart.map(c => <p key={c.id}>Cart Context Value: {c.name}</p>)}
    <Button onClick={handleClick}>Update Cart Context</Button>
  </Container>        
</div>

here sandbox for reference


Related Query

More Query from same tag