CODEWITHSUNDEEP
javascriptreactjssortingsearch
ty1
ty1

Reputation: 364

Can you hide certain react fragments rendered by array?

Summary

I have about 100 react fragments loaded into an array, and then passed to my react render method. I'm trying to implement a search bar so a user can quickly search for certain titles. In my case, here's what each element in my array looks like: 

<Grid item md={10} style={{alignContent: 'center', alignItems: 'center', justifyContent: 'center', display: 'all'}}>
  <Card data={json[item]} title={item} onClick={that.props.install} result={testResult} 
</Grid>

Each title looks someting like 20.0.15, 20.0.16, 20.0.20, etc etc. So if a user entered 20.0.1, given only the above, I'd want to just hide the latter.

Attempts

I've done the quick and dirty way of just straight up deleting an entry after looping through the titles and then setStating a new array. But I'm curious if theres a better way. You'll notice i have a display: 'all' in my JSX for the grid. When set to none, it will hide that element. Is there a way to programatically set that value? I've tried digging into the react element and manually setting it, but that gives the following error: TypeError: Cannot assign to read only property 'display' of object '#<Object>'

The code that produced this error: this.state.cardArray[i].props.style.display = 'none';

Is there a cleaner way to simply hide react fragments in an array?

Upvotes: 0

Views: 357

Answers (1)

Remolten
Remolten

Reputation: 2682

Yes, you can programatically change the display value. Here is an example using a ternary operator:

<Grid item md={10} display={title.includes(searchQuery) ? "all" : "none"}>
  <Card title={title}/>
</Grid>

This will conditionally set the display property to show titles that match the user's searchQuery.

Upvotes: 1

Related Questions