Ad
How To Filter Object In React?
Here is my question, in the first picture. I map my object, it correctly displays my objects, I would like to filter only the items that contain the name beers.
let addedItems = this.props.items.length ?
(
this.props.items.map(item => {
return (
<div className="homeProduct">
<Media >
<Media body className="mediaBodyContainerHome">
<div className="mediaBodyTitle">
<Media heading className='MediaTextHome'>
{item.title}
</Media>
</div>
</Media>
</Media>
I show you my table
const initState = {
items: [
{id:1,title: "Hype PA (Demi-Pinte)", ctg: "beers", },
{id:2,title:'Fuso jaune - kombucha', ctg: "cocktail",},
{id:3,title:'Tartinades Terre d\'Apéro', ctg: "planches",},
],
addedItems:[],
}
Ad
Answer
You can do something like this :
let addedItems = this.props.items.length ?
(
this.props.items.filter(item => item.ctg==="beers").map(item => {
return (
<div className="homeProduct">
<Media >
<Media body className="mediaBodyContainerHome">
<div className="mediaBodyTitle">
<Media heading className='MediaTextHome'>
{item.title}
</Media>
</div>
</Media>
</Media>
<div>
) : "Another rest condition"
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad