How to render a filtered array in React.js

React.js is a popular JavaScript library for building user interfaces. One common task in React.js is rendering a filtered array. This can be achieved by using the map method to iterate through the array and then render the filtered items. In this article, we will walk through the steps to render a filtered array in React.js.

Step 1: Create a state for the array

      
        const [items, setItems] = useState([
          { id: 1, name: 'item1', category: 'category1' },
          { id: 2, name: 'item2', category: 'category2' },
          { id: 3, name: 'item3', category: 'category1' },
        ]);
      
    

Step 2: Create a state for the filter value

      
        const [filter, setFilter] = useState('');
      
    

Step 3: Render the filtered array

      
        {items
          .filter(item => item.category === filter)
          .map(item => (
            
{item.name}
          ))
        }
      
    

By following these steps, you can render a filtered array in React.js. The filter value can be updated by using an input element and setting the value to the filter state. This will cause the array to be re-rendered based on the new filter value.

Overall, rendering a filtered array in React.js is a common task and can be achieved with a few lines of code. By leveraging the map and filter methods, you can create a dynamic and responsive user interface that displays only the items that meet the filter criteria.