javascript - how to create a filter to dynamically render fetched items

Question

How do I create a filter to dynamically render fetched items from an API in to get more than one filter criteria. I'm new to React.

Below is My App.js file where I'm fetching from the API, setting it in the 'records' state. I'm importing the FilterRecords component here

 const App = () => {
  const [records, setRecords] = useState([])
  const [loading, setLoading] = useState(false)
  const [currentPage, setCurrentPage] = useState(1)
  const [recordsPerPage] = useState(20)

    useEffect(() => {
      const fetchRecords = async () => {
          setLoading(true)
          const res = await fetch('http://api.enye.tech/v1/challenge/records')
          const data  = await res.json();
          setRecords(data.records.profiles)
          setLoading(false)
        } 
      fetchRecords()
      // eslint-disable-next-line
    }, []) 

  // Get current records
  const indexOfLastRecord = currentPage * recordsPerPage // should give the index of the last records
  const indexOfFirstRecord = indexOfLastRecord - recordsPerPage // should give the index of the first records
  // Get current records
  const currentRecords = records.slice(indexOfFirstRecord, indexOfLastRecord) // Slices out the number of records per page

  // change page
  const paginate = (pageNumber) => setCurrentPage(pageNumber)
  
    return (
      <Fragment>
        <SearchBar />
        <div className='container'>
          <h2>Patients Record Details</h2>

          <RecordsFilter />
          <Pagination recordsPerPage={recordsPerPage} totalRecords={records.length} paginate={paginate} />
         
          {!loading ? <Records loading={loading} records={currentRecords} /> : <div></div>}
          
        </div>
      </Fragment>
    );
  }

And Below is my filterRecords component. Here, I've destructured the records, filtered through them to only search for Gender, and mapped it to display the typed outcome. I'm not sure if the onChange, onSubmit is properly implemented. When I type into the filter input, I get cannot read property filter of undefined. I need help with how to make it work properly

    import React, { useState } from 'react'

const RecordsFilter = ({ records }) =>  {
    const [search, setSearch] = useState('')
    const [loading, setLoading] = useState('')

    const onChange = (e) => {
        setSearch({ [e.target.name]: e.target.value })
    }

    const filteredRecord = records.filter((record) => { 
        return record.Gender.includes('Male', 'Female', 'Prefer to skip')
    })

    const renderFilter = (
        <div className='card card-body'>
            <ul>
                {filteredRecord.map(record => {
                    return <li className="collection-item">
                            {record}
                        </li>
                })}
            </ul>
        </div>
    )
        return (
            <div>
                <form onSubmit={filteredRecord}>
                    <input type="text" name='text' value={search} placeholder='Filter from...' onChange={onChange} />
                </form>

                {!loading ? renderFilter : <div></div>}
            </div>
       
        )

The fetching works fine and renders. I want to filter and map properly below is a screenshot

Answer 1

You have not passed records as props in RecordsFilter.

 return (
      <Fragment>
        <SearchBar />
        <div className='container'>
          <h2>Patients Record Details</h2>

          <RecordsFilter records={currentRecords} />
          <Pagination recordsPerPage={recordsPerPage} totalRecords={records.length} paginate={paginate} />
         
          {!loading ? <Records loading={loading} records={currentRecords} /> : <div></div>}
          
        </div>
      </Fragment>
    );
  }