reactjs - How to add Month and Year based filters with table in ReactJs?

Question

I have a table where data is inserted from a JSON. Using React.Component, the table creation is below:

function myComponent() {
let handleMonthChange = (e) => {
    alert('working fine month...');
  }
let handleyearChange = (e) => {
    alert('working fine year...');
  }

    return (
        <>
    <tbody>
      {DATA.map(x => (
        <tr>
        <td>{x.date}</td>
        <td>{x.name}</td>
        <td>{x.language}</td>
        <td><a href={x.link} target="_blank" class="btn">Click to Listen</a></td>
        </tr>
      ))}
    </tbody>
)}

---

 <select name="ddlWebinarMonth" onChange={handleMonthChange} className="form-control">
                                        <option value="0">Month</option>
                                        <option value="1">January</option>
                                        <option value="2">February</option>
                                        <option value="3">March</option>
                                        <option value="4">April</option>
                                        <option value="5">May</option>
                                        <option value="6">June</option>
                                        <option value="7">July</option>
                                        <option value="8">August</option>
                                        <option value="9">September</option>
                                        <option value="10">October</option>
                                        <option value="11">November</option>
                                        <option value="12">December</option>
                                    </select>

---

<select name="ddlWebinarYear" onChange={handleyearChange} className="form-control">
                                    <option value="0">Year</option>
                                    <option value="2021">2021</option>
                                    <option value="2020">2020</option>
                                    </select>

Data displaying properly but I have to add Month and Year based filter with the table. How can I do that?

Thanks for your efforts!

标签： reactjs