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)
Source: stackoverflow.com
Related Query
- How can I seperate all the titles from json file whose title contain a given word?
- How can I load the array images from JSON file in react gatsby?
- How can I add fields to a json file from the fields in the front end in a react application?
- How can I select all the classNames that ends with a given word in MUI sx property?
- How can I retrieve elements and properties from the given JSON
- react js how to import only the required function from a file and not the all functions
- How can I get the name of the current user from the Json Web Token?
- In Reactjs, how can I return images from a json file where I already put image links?
- How can I get rid of all the extra numbers in this return date from react-date-picker?
- How to use a variable in which data is fetched from mongoDB , in another file where we can use the data stored in that variable
- How can we import the image from one js file to another js file
- How can I retreive all the fields from a firebase document to a map or Key: Value pair
- How can I filter json data from api call in react into different sections of the component
- How I can define image in React component if path to image I get from JSON file
- So how can I sum all the values in all objects in an array which is coming from react redux?
- How can i get the values of actor names from the below given json. I am able to get rest of the values but not actor names
- How can I return only the set-State from my fetched json data?
- How can I print all elements of an array (passed as props from the parent's state) inside JSX code?
- How are the countries displayed from the json file
- How do I return a JSON array in React from a local file and have it map through all of my items?
- how can I use the JSON token Response returned by an endpoint to another .js file in React
- How can I Extract JSON Object that Holds Base64 and File Extension from application/json body in ASP.NET Core
- How can I import the const data from another file using Promise (React)
- How do I print titles from the given api?
- How can I import and use data from a JSON file in my React app?
- How can i show alert to the user when user try to reload the page while file uploading to server from react js?
- How can I display more than one component from the same file in the App.js?
- How can I call function from div and render the json object returned?
- How would I validate the value from JSON api and convert it into another word in react.js?
- How can I use the css file from react-table in my react project along with css modules?
More Query from same tag
- Can't handlechange in Formik in Reach.Js
- Typescript - Create a function where argument validates object based on passed in component
- Reactjs: binding onClick to a dynamically created list component
- Why Material-UI is not overriding styles?
- React useState hook does not shows correct state of array
- React+Redux. Connect doesn't update state of component
- passing parameters through react-router
- process.env.API_KEY is undefined
- form submission in react js
- React JS: Passing values when back button is clicked
- How to update an object in the redux store?
- Infinite loop (react firebase firestore reactfire)
- Error: Invariant Violation: Touchable child must either be native or forward setNativeProps to a native component stack
- How to show a loading indicator in React Redux app while fetching the data?
- Why does mapping state to props give undefined?
- React useRef on Canvas getting null or undefined
- How will get the count using RestAPI with filter query
- req.handle.writev is not a function
- Cannot GET after async AJAX request in reactjs react.Component
- Jest + Enzyme: How to test an image src?
- How to add scroll bar for React bootstrap DropDown?
- reactjs get the children count of an element
- How to type higher order component that provides props
- How to limit copying from electron app to certain word length?
- Why doesn't the message POST
- react-hook-form: Dont show default values in submit data when they are not mounted
- Styling based on attr on Styled components
- immutably update array of objects in redux
- Can't send patch request to React Native
- Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment -ReactJS