Soy nuevo en reactjs. Estoy mostrando los datos json en la tabla. También quiero mostrar solo datos de fila de tabla específicos para la opción de filtro específica. Aquí quiero que cuando se seleccione noida, la tabla debería mostrar solo la 2ª 3ª fila de la tabla. cuando se selecciona Moradabad, debe mostrar solo la primera fila de la tabla.

Aquí adjunto la imagen que muestra todas las filas, por favor ayúdenme en esta lógica de filtración que se muestra solo en la ciudad seleccionada.

El código está debajo

 import React from 'react'; import './style.css'; export default class JsonDataDisplay extends React.Component { constructor(props) { super(props); this.state = { data: [ { id: 1, name: 'Akshit', city: 'Moradabad', }, { id: 2, name: 'Nikita', city: 'Noida', }, { id: 3, name: 'Deeksha', city: 'Noida', } ], }; } render() { const displaydata = this.state.data.map((info) => ( <tr> <td>{info.id}</td> <td>{info.name}</td> <td>{info.city}</td> </tr> )); return ( <> <FilterComponent /> <br /> <section> <table> <thead> <tr> <th>id</th> <th>name</th> <th>city</th> </tr> </thead> <tbody>{displaydata}</tbody> </table> </section> </> ); } } function FilterComponent(props) { const data = ['All', 'Noida', 'Moradabad']; return ( <div> <div>city</div> <select> {data.map((field) => ( <option>{field}</option> ))} </select> </div> ); }