im new in Node, JavaScript and React. I must show a list of data inside a dropdown, then the selected one save it in the database. The problem is how to display the list of data to select
In this way they capture the data
<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>
I understand that value is the selected value of the dropdown and that I must save later, but how do I pass a different array in Options
const arra = [{name:"hello0"},{name:"hello1"},{name:"hello2"},{name:"hello3"}];
<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 could be in the local state, so you are free to manipulate the array with React.useState. Something like this:
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"
/>
then you can mutate the state of arra with setArra based on some event such as onClick or React.useEffect
// e.g add extra options:
setArr(prev => [...prev, { name: "hello4"}, { name: "hello5" }])
// e.g 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])