How to display the values from a map on a react web app (javascript)

I am new to JavaScript. I have a map in which I store 3 values to each key. The size of the map is variable and a new key:values pair is added every time a new item is published on the app.

I would like to display the current contents of the map on the web page (ideally a table format but for now I just want to see them printed there before I worry about that). All my searches are obstructed by people talking about google maps.

I have found ways to solve this when using an array but I like the structure of the map.

I initialize an empty map:

const productMap = new Map();

New items are added to the site and the map expanded:

    handleSubmit = async () => {
    const { cost, itemName, quantity } = this.state;

    let result = await this.ItemManager.methods.createItem(itemName, cost, quantity).send({ from: this.accounts[0] });
    const index = result.events.ProductStep.returnValues._productIndex;

    productMap.set(index, {itemName: itemName, cost: cost, quantity: quantity}); **// This is where map values are added. 1 key (index) has 3 values (itemName, cost and quantity)**

    console.log(productMap)
    
    alert("Send "+cost+" Wei to "+result.events.ProductStep.returnValues._address);
  };

This function prints to the console exactly how I want, but I am not sure how to get this into the JSX (I think that’s the right term?) part.

    printValues = () => {
    for(let [key, value] of productMap){
      console.log(value.itemName +':'+ value.cost +':'+ value.quantity) **//This logs 'Item Name' : 'cost' : 'quantity' in a separate row for each key- this is what I ideally want but displayed on the web page**

      return(
        <div>{value.itemName} {value.cost} {value.quantity}</div>
        )
    }
   }

I have tried many variations to get this to show up on the web page, but nothing has worked so far.

 return (
      <div className="App">
        <header className='App-header' ><img className='App-logo' src={mylogo} alt="logo"/></header>
        <h1>Simply Payment/Supply Chain Example!</h1>
        <h2>Products for sale:</h2>

        {this.printValues} **//I imagine it being something along these lines where the
 //function produces the desired values and they are displayed on the web page.**

Thank you for any help!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can iterate the same map on JSX and print your values like how you are doing on console.log. Since it is a for loop you have to store the items in some variable and use them in JSX. You can update your printValues() method like this.

printValues = () => {
  let el = [];
  for (let [key, value] of productMap) {
    console.log(value.itemName + ":" + value.cost + ":" + value.quantity); //This logs 'Item Name' : 'cost' : 'quantity' in a separate row for each key- this is what I ideally want but displayed on the web page**
    el.push(value.itemName + ":" + value.cost + ":" + value.quantity);
  }
  return <div>{el}</div>;
};

I have attached the sandbox by using both a map and my style of using an array of objects in state. You can check it.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0