хотел отфильтровать данные json согласно указанному c значению в реакции с использованием фильтра

Question

У меня есть JSON данные

[{"id":1,"name":"sany","email":"san@yahoo.com","pass":"sany","groups":
{"id":1,"name":"Admin"}},{"id":2,"name":"jiwan","email":"jiwan@yahoo.com",
  "pass":"john ","groups":{"id":2,"name":"Student"}}]

Я могу перечислить все значения json, используя карту в реакции, но не знаю, как фильтровать, указав c email.

return(<div>
{jsonData.filter( user=> user.email==="san@yahoo.com")} //not working, giving issue

            {jsonData.map((user)=>
            {
                return <h1>{
                    user.email
                }</h1>
            }
            )}

        </div>)

Ошибка при получении Ошибка: объекты недопустимы как дочерний элемент React (найдено: объект с ключами {id, name, email, pass, groups}). Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив.

Answer 1

Это происходит потому, что Array.filter возвращает новый массив, и вам нужно map отфильтрованный array, а не исходный.

return (
  <div>
    {jsonData.filter(user=> user.email === "san@yahoo.com").map((user)=> {
        return <h1>{user.email}</h1>
      }
    )}
  </div>
)

или вы можете сохранить отфильтрованный.

render() {

  const filteredArray = jsonData.filter(user=> user.email === "san@yahoo.com");

  return (
    <div>
      {filteredArray.map((user)=> {
          return <h1>{user.email}</h1>
      })}
    </div>
  )
}

Answer 2

Array.prototype.filter создать новый массив. Таким образом, вы можете связать фильтр и карту. Например. jsonData.filter(({email})=> email==="san@yahoo.com").map(({email})=> <h1>{email}</h1>);.