Rendering react components multiple times based on cookies

Question

so I'm trying to create a shooping cart that displays items saved in cookies. Here is what I have:

function safe_item(name) {
document.cookie += 'item name: ' + name + '?';
}

This function is called by onClick event, but I guess it does not matter since my console.log(document.cookie.split('?')) returns data properly:

0: "item name: Blekk BROTHER LC1000 Value Pack"
1: "item name: Blekk BROTHER LC1000 Value Pack"
2: "item name: Blekk BROTHER LC1000Y gul"
3: "item name: Blekk BROTHER LC1100 Value sort+CMY (4)"
4: "item name: Blekk BROTHER LC1000 Value Pack"
5: "item name: Blekk BROTHER LC1280XLC blå"
6: "item name: Blekk BROTHER LC1280XLM rød"
7: "item name: Blekk BROTHER LC1280XLC blå"
8: "item name: Blekk BROTHER LC1280XLC blå"
9: "item name: Blekk BROTHER LC1280XLM rød"

Now, I want to render component with item names from cookies:

let cookie = document.cookie.split('?');

function InCart() {
for (let i = 0; i < cookie.length; i++) {
return (
  <ItemInCart>
      <InCartFont>{cookie[i].item name}</InCartFont>
      <CartRemove>
        <CartX>x</CartX>
        <br></br>
        remove
      </CartRemove>
    </ItemInCart>
  )
  }
  }

  export default InCart;

When I run my app it renders as expected, but only once and empty. While I need to loop this process and insert item names from cookies.

console.log(cookie) gives good output, what am I missing?

Answer 1

You can't return multiple times. Use a single return with map() instead:

function InCart() {

return (
<div>
{ cookies.map( cookie =>
  (<ItemInCart>
      <InCartFont>{cookie.item name}</InCartFont>
      <CartRemove>
        <CartX>x</CartX>
        <br></br>
        remove
      </CartRemove>
    </ItemInCart>)
</div>
  ))
  }
  }

  export default InCart;