reactjs - React ant deisgn Form data search conflict

Question

I'm beginner to react and I'm using ant design for my application. Here is my conflict, I'm trying to make book name and price search after display details, but I don't know how to do that correctly. Anyone know how to do that correctly?

stazkblitz here

code here

    <div>
      <Row justify="center">
        <Col span={24}>
          <Card title="Search Book" >
            <Row >
              <Col span={6}>
                <Input placeholder="Book Name" />  <Space></Space>
              </Col>

              <Col span={6}><Input placeholder="Price" /></Col>
              <Col span={6}>
              <Button type="primary" icon={<SearchOutlined />}>
                Search
              </Button>
              </Col>
            </Row>
            <br/><br/>
              
            <Descriptions title="Book Info">
              <Descriptions.Item label="Book Name">{this.bookName}</Descriptions.Item>
              <Descriptions.Item label="Price">{this.bookPrice}</Descriptions.Item>
            </Descriptions>

          </Card>
        </Col>
      </Row>
    </div>

question from:https://stackoverflow.com/questions/65857943/react-ant-deisgn-form-data-search-conflict

Answer 1

This simple working example should give you an idea about filtering and search into the array of objects using filter.

const { Input, Card, Row, Col, Space, Button, Descriptions } = antd

const books = [
  { name: "example1", price: 1 },
  { name: "example2", price: 2 },
  { name: "example3", price: 3 },
  { name: "example4", price: 4 },
  { name: "example11", price: 10 },
  { name: "example20", price: 20 },
  { name: "example34", price: 30 },
  { name: "example48", price: 40 },
];
const App = () => {
  const [filteredBooks, setFilteredBooks] = React.useState(books);
  const bookHandler = e => {
    setFilteredBooks(books.filter(book => (
      book.name.includes(e.target.value)))
    )
  };
  const priceHandler = e => {
    if(e.target.value)
      setFilteredBooks(books.filter(book => (
        book.price <= Number(e.target.value)))
      )
    else setFilteredBooks(books)
  };
  return (
    <Card>
      <Row>
      <Descriptions title="Filter:"/>
        <Col span={6}>
          <Input type="text" placeholder="Book Name" onChange={bookHandler} />
          <Space />
        </Col>
        <Col span={6}>
          <Input type="number" placeholder="Price" onChange={priceHandler} />
        </Col>
      </Row>
      <br />
      {filteredBooks.map(book => (
        <Descriptions title="Book Info">
          <Descriptions.Item label="Book Name">
            {book.name}
          </Descriptions.Item>
          <Descriptions.Item label="Price">
            {book.price}
          </Descriptions.Item>
        </Descriptions>
      ))}
    </Card>
  );
};

ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.10.3/antd.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.10.3/antd.min.css"/>
<div id="react"></div>