Soy nuevo en Node, JavaScript y React. Debo mostrar una lista de datos dentro de un menú desplegable, luego el seleccionado lo guarda en la base de datos. El problema es como mostrar la lista de datos a seleccionar
De esta forma capturan los datos
<div className="p-field p-col"> <label className="p-col-fixed" htmlFor="to">Columna final </label> <div className="p-col"> <Dropdown id={'to'} appendTo={document.body} value={selectedStatusTo} options={props.statuses} onChange={(e) => setSelectedStatusTo(e.value)} optionLabel="name" placeholder="Seleccione Estado"/> </div> </div>Entiendo que el valor es el valor seleccionado del menú desplegable y que debo guardar más tarde, pero ¿cómo paso una matriz diferente en Opciones?
const arra = [{nombre:"hola0"},{nombre:"hola1"},{nombre:"hola2"},{nombre:"hola3"}];
<div> <h5>Tipo de reparto</h5> <hr/> <div className="p-fluid p-formgrid p-grid"> <div className="p-field p-col"> <label className="p-col-fixed" htmlFor="from">Reparto</label> <div className="p-col"> <Dropdown id={'type'} appendTo={document.body} value={selectedStrategy} options={arra} onChange={(e) => setStrategy(e.value)} optionLabel="name" placeholder="Seleccione Tipo Reparto"/> </div> </div> </div> </div>options prop podría estar en el estado local, por lo que puede manipular la matriz con React.useState . Algo como esto:
const defaultArra = [{name:"hello0"},{name:"hello1"},{name:"hello2"},{name:"hello3"}]; const [arra, setArra] = useState(defaultArra); // ... <Dropdown id={"type"} appendTo={document.body} value={selectedStrategy} options={arra} onChange={(e) => setStrategy(e.value)} optionLabel="name" placeholder="Seleccione Tipo Reparto" /> luego puede mutar el estado de arra con setArra en función de algún evento como onClick o React.useEffect
// eg add extra options: setArr(prev => [...prev, { name: "hello4"}, { name: "hello5" }]) // eg fetch from API: React.useEffect(() => { async function fetchOptions() { const res = await fetch('https://example.com/tipo-reparto') const options = await res.json(); setArr(options) } fetchOptions(); }, [setArr])