CODEWITHSUNDEEP
javascriptreactjsdictionary
Ruben Martins
Ruben Martins

Reputation: 181

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

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>
  );
}

Upvotes: 0

Views: 509

Answers (1)

iunfixit
iunfixit

Reputation: 994

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

Upvotes: 1

Related Questions