React - Dealing with an empty array when using .map()

Question

I have little experience in react and javaScript and am having difficulty rendering a list that is initially empty The list should be a list of search results that will be presented to the user after clicking search but the list is not being displayed because it is empty and it is not being displayed after getting the search result.

export default function PesquisarDisc() {
  const [disciplinas, setDisciplinas] = useState([]);
  const [resPesquisa, setResPesquisa] = useState([]);

  const user = useSelector((state) => state.user.profile);

  async function carregarDisciplinas() {
    const response = await api.get('disciplinas');

    return response.data;
  }

  function handleSubmit({ anoLetivo1, curso1, unidadeCurricular1 }) {
    carregarDisciplinas().then((value) => {
      setDisciplinas(value);
    });

    disciplinas.forEach((disciplina) => {
      if (
        disciplina.professor_id === user.id &&
        disciplina.anoLetivo === anoLetivo1 &&
        disciplina.curso === curso1 &&
        disciplina.nome === unidadeCurricular1
      ) {
        setResPesquisa(disciplina);
      }
    });
  }

  return (
    <Container>
      <div className="title">Pesquisar disciplinas</div>
      <Form onSubmit={handleSubmit}>
        <span>Ano Letivo:</span>
        <Input
          name="anoLetivo1"
          type="text"
          placeholder="Introduza o ano letivo"
        />
        <span>Unidade Curricular:</span>
        <Input
          name="unidadeCurricular1"
          type="text"
          placeholder="Introduza a unidade curricular"
        />
        <span>Curso:</span>
        <Input name="curso1" type="text" placeholder="Introduza o curso" />

        <hr />

        <button type="submit">Pesquisar</button>
      </Form>

      <List>
        {resPesquisa.map((resultado) => (
          <li key={resultado.nome}>
            <span>{resultado.nome}</span>
            <a href="/">Lançar sumário</a>
          </li>
        ))}
      </List>
    </Container>
  );
}

You're mapping on resPesquisa, but it's not an array; you're resetting the state value N times in the handleSubmit's forEach to an object: disciplina — lux
– lux, Commented Aug 30, 2021 at 16:14
thanks for the tip i still don't understand but i'll try to research more about forEach and sorry for the fact that the names are in portuguese — Ruben Martins
– Ruben Martins, Commented Aug 30, 2021 at 17:08
resPesquisa is not an array. You are using setResPesquisa(disciplina); which is setting an object on resPesquisa within a for loop. Therefore when you try to map on resPesquisa is fails. — lux
– lux, Commented Aug 30, 2021 at 20:47

iunfixit · Accepted Answer · 2021-08-30 16:19:11Z

1

Move your loop to the then scope otherwise disciplinas is not defined with the latest value(you are looping before the result resolved), also use value instead of disciplinas, or use the callback of setDisciplinas

function handleSubmit({ anoLetivo1, curso1, unidadeCurricular1 }) {
    carregarDisciplinas().then((value) => {
      setDisciplinas(value);

      setResPesquisa(value.filter((disciplina) => disciplina.professor_id === user.id && disciplina.anoLetivo === anoLetivo1 &&
          disciplina.curso === curso1 &&
          disciplina.nome === unidadeCurricular1
      ));
    });
  }

Edit: Taking a look at the comments I noticed your resPesquisa is used as an array, so perhaps filtering it is better

edited Aug 30, 2021 at 16:19

answered Aug 30, 2021 at 16:12

iunfixit

9945 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ruben Martins Over a year ago

I could understand... I still hadn't seen the code you sent thank you very much, you helped me a lot

Collectives™ on Stack Overflow

React - Dealing with an empty array when using .map()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related