Ad

How To Filter Object In React?

- 1 answer

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
Ad