如何在下面的代码中添加文本框并过滤响应？

Question

我添加了搜索框。我在此处隐藏了api的详细信息。现在我已创建一个searcbar来过滤基于产品的搜索框值并在页面中显示并展示了产品

此反应算法搜索

import React, { Component } from 'react'; import ReactDOM from
'react-dom'; import axios from "axios"; import { InstantSearch,
RefinementList } from 'react-instantsearch-dom';

import * as algoliasearch from "algoliasearch"; class App extends
React.Component {
 constructor() {

super();
this.state = {  
  query:'',     
  data:{hits: []}
 }
 // set data to string instead of an array   }
 componentDidMount() {
this.getData();   }   getData = () => {
var client = algoliasearch('id', 'api-key');
var index = client.initIndex('nameofindex');

index.search({
  query: "",

   attributesToRetrieve: ['ItemRate', 'Color','Category','productDetails','brandName','Price','productImages','objectID']
}, (error,data) => {
  this.setState({
    data: {
      hits: data.hits
    }
  })
  console.log(data.hits)
})   }
 render() {
//const { data } = this.state;
const { query, data } = this.state;

return (
  <div id="root" >

<center><h2> Products</h2></center>
<div className="search-books-input-wrapper">


                </div>

                <input
type="search"
   />
  {
 this.state.data.hits.map((data,index) => {


  return<div>

   <h3> Product Name: {data.productDetails}<br /></h3>
   Product Brand: {data.brandName}<br />
  Product Iteam: {data.ItemRate}<br />
  Product Price: {data.Price}<br />
  Product Category: {data.Category}<br />
  Product image: {data.productImages}<br />
  Product Color: {data.Color}<br />
  Product ID: {data.objectID}<br />
  </div>
     })}

   </div>
   )
  } }


//render(<App />, document.getElementById('app')); export default App;