I am building a web app that given some user input, does some math, and outputs the profit per hour of each item that can be created by an inputted building.

Here is an example input:

Physics laboratory 2 1.0 0.01

and output:

{
    Energy research: 821.6746356364301, 
    Mining research: 742.7240922619478, 
    Electronics research: 864.3855853308221
}

I want to display a table using this data, with columns named like Item and Profit Per Hour.

I studied this React Functional Table and others that use .map to display a table. However, when I tried to copy/paste the example and adapt useState to my output example given above, I got errors that each child in the list must have a Key or something to that effect.

I have read lists and keys in React. I feel I should open a new venv and create-react-app to play around with map and keys.

Is this the correct direction to take to display a table like I intend?

Here is an example of my code showing a functional component that takes input from text fields and calls the api endpoint using them to return an object.

I wonder whether the async is potentially causing the key errors as maybe the table is trying to be created before the promise finishes.

const populateTable = async () => {
    try{
        let encodedName = encodeURI(buildingName)
        let targetURI = `http://127.0.0.1:8000/api/calculateProfitPerHourOf{}?buildingName=${encodedName}&buildingLevel=${buildingLevel}&productionModifierPercentage=${productionModifierPercentage}&administrationCostPercentage=${adminCostPercentage}`
        let res = await axios.get(targetURI);
        let arr = res.data
        setResult(arr);
        console.log(arr)
    } catch(e) {
        console.log(e)
    }
}

const HandleClick = () => {
    populateTable();
}