CODEWITHSUNDEEP
javascriptreactjsreact-hooksjavascript-objectsreact-state
Newb
Newb

Reputation: 21

rerender React JS

So i m trying to rerender a list by filtered values. The list is already rendered with all the values. I want to render it again with a dropdown of options. I get my values from a JSON locally.

[ { "brand": "toyota", "model": "corona", "cylinders": 4, "horsepower": 96, "origin": "Japan", "price": 40000 }, ... ]


export const FilterBrand = (props) => {
  const brands = props.list
    .map((vehicle) => vehicle.brand)
    .filter((value, index, vehicle) => vehicle.indexOf(value) === index);

  const handleChange = (e) => {
    // console.log(e.target.value);
  };
  return (
    <select onChange={(e) => props.handleChange(e.target.value)}>
      {brands.map((vehicle, key) => (
        <option key={key} value={key}>
          {vehicle}
        </option>
      ))}
    </select>
  );
}; here is my component



<div className="filter-brand">
 <FilterBrand
 list={list}
 handleChange={(value) => console.log(value)}
 />
</div here is my component imported in main app, JSON is also imported in main app and passed as props in my component.
How can I render it again based on the options from the dropdown?

Upvotes: 2

Views: 215

Answers (1)

Arshal Daison
Arshal Daison

Reputation: 126

use a state to store the 'results' to show then use a function or two to change 'results' based on the 'filter' selected. When a change in state occurs react will automatically re-render the view for you

Upvotes: 2

Related Questions