I have a select input where I want to pass an options array object using map but when rendering my page only one option even when the array I'm using in the map has several items it insists on presenting only one
below all the code:
export default function PesquisarAulas() {
const dispatch = useDispatch();
const user = useSelector((state) => state.user.profile);
const [docente, setDocente] = useState([]);
const [docenteDisciplinas, setDocenteDisciplinas] = useState([]);
const [disciplinas, setDisciplinas] = useState([]);
const updateDisciplinas = [...disciplinas];
async function carregarDocente() {
const response = await api.get(`docente/findByUser/${user.id}`);
return response.data;
}
async function carregarDisciplinasDocente() {
const response = await api.get(`docente/${docente.id}/disciplinas`);
return response.data;
}
async function carregarDisciplina(disc) {
const response = await api.get(`disciplinas/${disc.id_disciplina}`);
return response.data;
}
useEffect(() => {
carregarDocente().then((value) => {
setDocente(value);
});
}, [user]);
useEffect(() => {
carregarDisciplinasDocente().then((value) => {
setDocenteDisciplinas(value);
});
}, [docente]);
useEffect(() => {
docenteDisciplinas.map((docDisc) =>
carregarDisciplina(docDisc).then((value) => {
updateDisciplinas.push(value);
setDisciplinas(updateDisciplinas);
})
);
}, [docenteDisciplinas]);
console.log(disciplinas);
function handleSubmit() {}
return (
<Container>
<div className="title">Pesquisar aulas</div>
<Form onSubmit={handleSubmit}>
<div className="input-box">
<span>Ano Letivo:</span>
<Input
name="anoLetivo1"
type="text"
placeholder="Introduza o ano letivo"
/>
</div>
<div className="input-box">
<span>Disciplinas:</span>
<Select
name="tech"
options={disciplinas.map((disciplina) => ({
id: disciplina.id,
title: disciplina.nome,
}))}
placeholder="Nenhum selecionado"
/>
</div>
<div className="input-box">
<span>Aulas de:</span>
<Input name="dataInicio1" type="datetime-local" id="pickup_time" />
<span style={{ marginLeft: '10px' }}>ate:</span>
<Input name="dataFinal1" type="datetime-local" id="pickup_time" />
</div>
<div className="input-box">
<span>Curso:</span>
<Input name="curso1" type="text" placeholder="Introduza o curso" />
</div>
<div className="input-box">
<span>Unidade Curricular:</span>
<Input
name="unidadeCurricular1"
type="text"
placeholder="Introduza a unidade curricular"
/>
</div>
<hr />
<button type="submit">Pesquisar</button>
</Form>
</Container>
);
}
the focus of the problem is on these two code snippets here:
const [disciplinas, setDisciplinas] = useState([]);
const updateDisciplinas = [...disciplinas];
useEffect(() => {
docenteDisciplinas.map((docDisc) =>
carregarDisciplina(docDisc).then((value) => {
updateDisciplinas.push(value);
setDisciplinas(updateDisciplinas);
})
);
}, [docenteDisciplinas]);
<Select
name="tech"
options={disciplinas.map((disciplina) => ({
id: disciplina.id,
title: disciplina.nome,
}))}
placeholder="Nenhum selecionado"
/>
I think the problem is that when the select is rendered only one item is inserted in the disciplines array, I think maybe if there was a way to make Select wait until all the items in the disciplines array are ready so it can render, the problem would be solved.
