如何在按钮上创建一个函数，该函数可以过滤来自data.json的信息并显示与搜索相关的信息

Question

https://codesandbox.io/s/beautiful-sky-tnz07“移至/ home”是我现在拥有的实时版本 我正在使用react，并且我有一个data.json，我需要在表单上的按钮上有一个功能，因此当我在标签上搜索“ nicobes@gmail.com”时，我会得到一张包含该电子邮件所有相关信息的卡片从data.json

我已经显示了带有地图功能的json中的信息，但是我不知道如何创建一个功能来实现自己想要的功能。

{
  "data": [
    {
      "name": "Nickole Beatrice Smith",
      "address": "398 Pleasant Pine Cir. Harrington, DE 19123",
      "email": "nicobes@gmail.com",
      "age": 45,
      "notes": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, ",
      "phoneNumbers": [
        {
          "phone": "(302) 792-8434"
        },
        {
          "phone": "(302) 792-1134"
        },
        {
          "phone": "(302) 792-2234"
        },
        {
          "phone": "(302) 792-3334"
        }
      ],
      "relatives": [
        {
          "name": "Susan M Smith"
        },
        {
          "name": "Malcolm W Smith"
        },
        {}
      ]
    },
    {
      "name": "Jacke Melyn Postre",
      "address": "128 Pleasant Pine Cir. Harrington, DE 48402",
      "email": "jackpost@gmail.com",
      "age": 23,
      "notes": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, ",
      "phoneNumbers": [
        {
          "phone": "(512) 842-2124"
        }
      ],
      "relatives": [
        {
          "name": "Jay M Postre"
        },
        {
          "name": "May W Postre"
        }
      ]
    },
    {
      "name": "Louis K Patterson",
      "address": "333 Pleasant Pine Cir. Harrington, DE 11111",
      "email": "lpatterson@gmail.com",
      "age": 31,
      "notes": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, ",
      "phoneNumbers": [],
      "relatives": [
        {
          "name": "Jay M Postre"
        },
        {
          "name": "May W Postre"
        },
        {}
      ]
    },
    {
      "name": "Mickey K Mouse",
      "address": "443 Pleasant Pine Cir. Harrington, DE 12211",
      "email": "mmouse@gmail.com",
      "age": 21,
      "notes": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, ",
      "phoneNumbers": [
        {
          "phone": "(444) 792-8434"
        },
        {
          "phone": "(555) 792-1134"
        }
      ],
      "relatives": []
    },
    {
      "name": "Allan K Moury",
      "address": "312 Pleasant Pine Cir. Harrington, DE 11113",
      "email": "amoury@gmail.com",
      "age": 27,
      "notes": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, ",
      "phoneNumbers": [],
      "relatives": []
    }
  ]
}

我想要与搜索到的电子邮件有关的信息。