0
216
ViewsHow 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!
1 answers
Answer question0
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.
