Estoy usando React, Node, Express, Postgres. Tengo un componente que es una lista de datos cuyas opciones se completarán desde una tabla de base de datos. Mi consulta de tabla devuelve una matriz de objetos json, y quiero iterar a través de esta matriz para completar mi lista de datos.

Reaccionar componente

 import React, { Fragment, useState, useEffect } from "react"; const DataList1 = () => { const [suppliers, setSuppliers] = useState([]); //Search query for list of supplier names and their ids const getSuppliers = async () => { try { const response = await fetch("http://localhost:5000/supplier"); const jsonData = await response.json(); setSuppliers(jsonData); console.log(jsonData); } catch (err) { console.log(err.message); } } useEffect(() => { getSuppliers(); }, []); return <Fragment> <button className="btn btn-danger" onClick={getSuppliers}></button> <label htmlFor="SupplierDatalist">Choose a supplier:</label> <input list="SupplierDatalist" id="SupplierDatalist"/> <datalist id="SupplierDatalist"> {suppliers.map(suppliers => ( <option key={suppliers.supplier_id} value={suppliers.supplier_name} /> ))} </datalist> </Fragment> } export default DataList1;

Y así es como se ve mi matriz como ejemplo:

 Array(8) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…} ]​ 0: Object { supplier_id: "2", supplier_name: "Sup1" }​ 1: Object { supplier_id: "3", supplier_name: "Sup2" }​ 2: Object { supplier_id: "4", supplier_name: "Sup3" }​ ...

Para agregar un poco de contexto a lo que estoy tratando de hacer aquí, cada selección de lista de datos deberá tomar como parámetro la identificación/nombre para actualizar alguna otra selección