Estoy creando una aplicación web que, dada la entrada del usuario, hace algunos cálculos y genera la ganancia por hora de cada elemento que puede crear un edificio ingresado.

Aquí hay una entrada de ejemplo:

 Physics laboratory 2 1.0 0.01

y salida:

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

Quiero mostrar una tabla usando estos datos, con columnas nombradas como Artículo y Ganancia por hora .

Estudié esta tabla funcional de React y otras que usan .map para mostrar una tabla. Sin embargo, cuando traté de copiar/pegar el ejemplo y adaptar useState a mi ejemplo de salida anterior, obtuve errores de que cada niño en la lista debe tener una Key o algo por el estilo.

He leído listas y claves en React . Siento que debería abrir una nueva aplicación venv y create-react-app para jugar con el map y keys .

¿Es esta la dirección correcta para mostrar una tabla como pretendo?

Aquí hay un ejemplo de mi código que muestra un componente funcional que toma la entrada de los campos de texto y llama al punto final de API usándolos para devolver un objeto.

Me pregunto si el async está causando potencialmente los errores key , ya que tal vez la tabla esté intentando crearse antes de que finalice la promise .

 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(); }