score:2

Accepted answer

i think it'd be better to filter separate from the component.

here's a way:

// assuming the db is something like this based on your .map example
const moviedatabase = [
    { title: 'star wars: ii', id: 0 },
    { title: 'star wars: i', id: 1 },
    { title: 'star wars: iv', id: 2 },
    { title: 'moon', id: 3 }
  ]

// array of star wars movies
const starwars = moviedatabase.filter(movie => movie.title.includes('star wars'))

// component to render movies ( doesn't care about anything but rendering )
const movieboxes = movies => movies.map(movie => (
  <box key={movie.id} moviename={movie.title} />
)

you could further improve it by wrapping the filter in a function that takes a keyword and passes it to includes so you can find any movie.

score:0

you can also return null in your map() as your filter without needing to explicitely use array#filter() since react will not render that

const showmovies = moviedatabase.map((movie) =>{
    const {title} = movie
    return title.contains("star wars") ? <box moviename = {title} /> : null;
})

score:1

you can use array.filter()

const array = [{
  title: 'star wars',
  duration: 107
}, {
  title: 'star wars',
  duration: 103
}, {
  title: 'lord of the rings',
  duration: 500
}]

const filterarray = array.filter(film => film.title === 'star wars')

console.log(filterarray)


Related Query

More Query from same tag