Метод фильтра в React не работает, пока карта

Question

Я использую троичную проверку в React. Если элемент существует, он вызывает метод .map, а если нет - метод .filter. Карта работает нормально, но фильтр нет. Он выдает ошибку, говорящую, что объект не является допустимым дочерним элементом React, и использует массив. Однако, насколько я понимаю, это массив ...

 {test.searchTerm === ""
            ? test.users.map((item, index) => (
                <>
                  <tr>
                    <td>{index + 1}</td>
                    <td>{item.name.first + " " + item.name.last}</td>
                    <td>{item.email}</td>
                    <td>{item.gender}</td>
                    <td>{item.phone}</td>
                    <td>
                      <img src={item.picture.thumbnail} alt=""></img>
                    </td>
                  </tr>
                </>
              ))
            : test.users.filter((item, index) => {
              //console.log(test.users)
                if (
                  test.searchTerm === item.name.first ||
                  test.searchTerm === item.name.last ||
                  test.searchTerm === item.name.first + " " + item.name.last
                ) {

                  return (
                    <>
                      <tr>
                        <td>{index + 1}</td>
                        <td>{item.name.first + " " + item.name.last}</td>
                        <td>{item.email}</td>
                        <td>{item.gender}</td>
                        <td>{item.phone}</td>
                        <td>
                          <img src={item.picture.thumbnail} alt=""></img>
                        </td>
                      </tr>
                    </>
                  );
                }
              })}

Answer 1

In JavaScript filter используется для создания нового массива на основе условия. Ваш метод фильтра должен возвращать true для соответствующего элемента и false в противном случае. После этого вы должны отобразить полученный фильтрованный массив. После фильтра у вас все еще есть массив объектов.

{test.searchTerm === ""
            ? test.users.map((item, index) => (
                <>
                  <tr>
                    <td>{index + 1}</td>
                    <td>{item.name.first + " " + item.name.last}</td>
                    <td>{item.email}</td>
                    <td>{item.gender}</td>
                    <td>{item.phone}</td>
                    <td>
                      <img src={item.picture.thumbnail} alt=""></img>
                    </td>
                  </tr>
                </>
              ))
            : test.users.filter((item, index) => {
              //console.log(test.users)
                if (
                  test.searchTerm === item.name.first ||
                  test.searchTerm === item.name.last ||
                  test.searchTerm === item.name.first + " " + item.name.last
                ) {

                  return true;
                }
                return false
              }).map(item => (
                    <>
                      <tr>
                        <td>{index + 1}</td>
                        <td>{item.name.first + " " + item.name.last}</td>
                        <td>{item.email}</td>
                        <td>{item.gender}</td>
                        <td>{item.phone}</td>
                        <td>
                          <img src={item.picture.thumbnail} alt=""></img>
                        </td>
                      </tr>
                    </>
              ))}