score:2

Accepted answer
<AutoList autos={ filteredAutos.length > 0 ? filteredAutos : autos } />

score:0

this.state = {
      autos: [],
      audoData: [],
};

score:1

constructor(props) {
    super(props);
    this.state = {
      lists: [],
}
}
  componentDidMount() {
    axios.get('http://localhost:3001/your directory/yourfilename.json')
      .then(response => {
      // console.log(response.data)
       this.setState({
         lists: response.data,
         isLoading: false
        })
    })
 }

render() {

    const {lists} = this.state;
    console.log(lists)
     let filterHatchback = () => {
      // alert("event clicked")
      const hatchbackCar = lists.filter( (list) => list.car_type === 'Hatchback');
      this.setState({ lists: hatchbackCar });
      };

       return(
             <Card
                  className="carder"
                  body
                  style={{ fontSize: "14px", height: "" }}
                >
                  <p>Car Type</p>
                  <Button outline color="secondary" 
                    onClick={filterHatchback}
                    >
                    Hatchback
                  </Button> and so on

Related Query

More Query from same tag