Nothing was returned from render in React JS

Question

I am doing a call for an API (fake, just for testing), but i recive an error when calling it This is my code of the call

class Pacientes extends React.Component {
  state = {
    loading: true,
    error: null,
    data: undefined,
  };  

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async () => {
    this.setState({ loading: true, error: null });

    try {
      const data = await api.pacientes.list();
      this.setState({ loading: false, data: data });
    } catch (error) {
      this.setState({ loading: false, error: error });

    }
  };

  render() {
    if (this.state.loading === true && !this.state.data)
      return (
        <PageLoading/>
      );

    if (this.state.error) return (
      `Este fue el error ${this.state.error}`
    );

    return (
      <React.Fragment>
        <TableHeader elementos={this.state.data} />
        <Table pacientes={this.state.data} />
      </React.Fragment>
    );
  }
}

And the console says than the error is on the following line:

this.setState({ loading: false, data: data });

But I think than there is not. Then of make the call of the api i call a component and give props of the answer of the api(Data), and this is the component:

function useSearchPacientes(pacientes) {
  const [query, setQuery] = React.useState('');
  const [filteredPacientes, setFilteredPacientes] = React.useState(pacientes);

  React.useMemo(() => {
    const result = pacientes.filter(paciente => {
      return (
        `${paciente.firstName} ${paciente.lastName}`
      )
        .toLowerCase()
        .includes(query.toLowerCase());
    });

    setFilteredPacientes(result);
  }, [pacientes, query]);

  return { query, setQuery, filteredPacientes };
}

function Table(props) {
  const pacientes = props.pacientes;

  const { query, setQuery, filteredPacientes } = useSearchPacientes(pacientes);

  if (filteredPacientes.length === 0) {
    return (
      "No se encontraron resultados"
    );

    return (
      <React.Fragment>
          <div className="search-container">
            <form className="search-input-container">
              <input type="text" className="search-input form-control" placeholder="Buscar"
                value={query}
                onChange={(e) => {
                  setQuery(e.target.value);
                }}
              />
              <FontAwesomeIcon icon={faSearch} className="text-muted search-input-icon"/>
            </form>
            <div className="options">
              <select name="" className="form-control" id="">
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
              </select>
            </div>
          </div>
        <br />
        <div className="row justify-content-center">
          <div className="col-10 table-container border-primary">
            <br />
            <table className="table rounded table-responsive-md">
              <thead>
                <tr>
                  <th scope="col">Id</th>
                  <th scope="col">Nombre</th>
                  <th scope="col">Apellido</th>
                  <th scope="col">Twitter</th>
                  <th scope="col" className="text-center">
                    Opciones
                  </th>
                </tr>
              </thead>
              <tbody>
                {filteredPacientes.map(paciente => {
                  return (
                    <tr key={paciente.id}>
                      <TableRow paciente={paciente} />
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
        <br />
      </React.Fragment>
    );
  }
}

So, then of serch this error, i cant found a real solution, but i really think than the error is in the second component, near of the map function to the array.

Answer 1

You have wrongly used closing curly bracket for your if condition

function Table(props) {
  const pacientes = props.pacientes;

  const { query, setQuery, filteredPacientes } = useSearchPacientes(pacientes);

  if (filteredPacientes.length === 0) {
    return (
      "No se encontraron resultados"
    );
  } // the closing bracket should be here
    return (
      <React.Fragment>
          <div className="search-container">
            <form className="search-input-container">
              <input type="text" className="search-input form-control" placeholder="Buscar"
                value={query}
                onChange={(e) => {
                  setQuery(e.target.value);
                }}
              />
              <FontAwesomeIcon icon={faSearch} className="text-muted search-input-icon"/>
            </form>
            <div className="options">
              <select name="" className="form-control" id="">
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
              </select>
            </div>
          </div>
        <br />
        <div className="row justify-content-center">
          <div className="col-10 table-container border-primary">
            <br />
            <table className="table rounded table-responsive-md">
              <thead>
                <tr>
                  <th scope="col">Id</th>
                  <th scope="col">Nombre</th>
                  <th scope="col">Apellido</th>
                  <th scope="col">Twitter</th>
                  <th scope="col" className="text-center">
                    Opciones
                  </th>
                </tr>
              </thead>
              <tbody>
                {filteredPacientes.map(paciente => {
                  return (
                    <tr key={paciente.id}>
                      <TableRow paciente={paciente} />
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
        <br />
      </React.Fragment>
    );
}