We have discussed in our previous tutorial on how to use the array map function in React. In this tutorial, we will cover an exception where we can use the array map function with a condition in React. This is useful when we need to display selective components from an array. For example, active search engines from the search engines example we have covered previously.
So, we will alter the array map function code, and add a condition as shown below.
{search_engines.map((data) => (
data.active_status === true ? (
<li key={data.id}>
<div style={{display: 'contents'}}>
<img draggable="false" data-uuid={data.uuid} src={data.logo} alt=""></img>
<span>{data.name}</span>
</div>
<div onClick={(e) => deleteActiveEngine(data, e)}>
<FontAwesomeIcon style={trash_can} icon={faTrashCan} />
</div>
</li>
) : null
))}We can simply add a condition of ‘data.active_status === true ?‘ before rendering the display results. This will filter the array elements and only show those which have the active_status attribute as true. Similarly, we can pass any other condition to render selective elements from the object array.
