primeReact Props and dropdown options problem

Question

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>

score 1 · Answer 1 · answered Jun 15 '22 at 00:07

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])

primeReact Props and dropdown options problem

1 Answers1