如何在react js中使用搜索并在特定的div中获得结果？

Question

搜索时，结果应显示为div，如下所示：

我使用jquery在表中搜索，如何获得如上所述的结果。

我的组件代码是：

<div id="modaldash" style={{ display: (searching ? 'block' : 'none') }}>
          <p className="font-weight-medium" id="name"> <img id="logo" className="logo" src={jessica} alt="pam-logo" /> Jessica James </p>
          <button id="Addlist" onClick={this.onSubmitdata} className="btn info">{this.state.shown ? "Addded" : "Add to list"}</button>
          <p id="mailid">[email protected] </p> 
          <p id= "address">Mountain view,Ave</p>        
        </div>

它只是CSS的静态内容。如何使用搜索并获得上述结果。

Answer 1

export default function App() {
  // considering the data object to search on name
  const [searchedData, setSearchedData] = useState([]);
  const users = [
    {
      name: "abc1",
      emailid: "[email protected]",
      address: "23rd main, 2nd street"
    },
    {
      name: "adb2",
      emailid: "[email protected]",
      address: "23rd main, 2nd street"
    },
    {
      name: "adc3",
      emailid: "[email protected]",
      address: "23rd main, 2nd street"
    }
  ];

  const handleSearch = event => {
    const data = users.filter(
      user => user.name.indexOf(event.target.value) !== -1
    );
    setSearchedData(data);
  };

  const showSearchedData = () => {
    return searchedData.map(user => (
      <div key={user.emailid}>
        <p className="font-weight-medium" id="name">
          {" "}
          <img id="logo" className="logo" src="" alt="pam-logo" />
          {user.name}
        </p>
        <button id="Addlist"> Added/ add to list</button>
        <p id="mailid">{user.emailid} </p>
        <p id="address">{user.address}</p>
      </div>
    ));
  };
  return (
    <div className="App">
      <input type="text" onChange={handleSearch} />
      <div id="modaldash">{searchedData.length > 0 && showSearchedData()}</div>
    </div>
  );
}

您可以添加CSS以使外观看起来如所附的图像所示。在此处检查工作示例https://codesandbox.io/s/falling-sun-r3rim