Reactjs(Typescript) – Concatenate array in Select field

I am making a request that returns an api array, however when performing the map, the results are not concatenated into just one select, duplicating the form fields.

const [systems, setSystems] = useState<SystemProps[]>([]);
useEffect(() => {
api.get(`/systems?&order=description`).then((response) => {
setSystems(response.data.data);
});
}, []);

return (
<div className="col-sm-4">
<label>Sistema</label>
{systems.map(system => (
<SelectForm
key="id"
name="system_id"
id="system_id"
placeholder="Selecione"
options={[{ value: system.id, label: system.description }]}
/>
))}
</div>

look the duplicate select

Answer

I believe this is what you’re looking for:

<label>Sistema</label>
<SelectForm
key="id"
name="system_id"
id="system_id"
placeholder="Selecione"
options={ systems.map(system => ({value: system.id, label: system.description })) }
/>

You want to map for the options, not the entire form.