My data back from search result has columns: enTitle,Image,url,enDescription,HasLandingPage,AddInfo.

I want to filter search results by AddInfo to show in different lists. later if I can add a button that would be better.

Render Data:

```
const ListArticle = (props) =>{
    return (
        <div className="card">
            <div className="search-img-lft">
                <a href={props.link} target="_blank">
                    <img src={props.image} alt="" />
                </a>
            </div>
            <div className="search-imgcont-rgt">
                <a href={props.link} target="_blank">
                    <h3>
                        {props.title}
                        {props.kind} // just to see if kind works
                    </h3>
                    <p>{props.desc}</p>
                </a>
                <a href={props.link} target="_blank" className="default-link">{props.link}</a>
            </div>
        </div>
    );
}

```

List Class:(ignore the i,brac & lim they are for pagination)

```
    class List extends React.Component {
        render(){
            const liArt =[];
            const searchText = this.props.searchText.toLowerCase().replace(/[^a-z0-9]/g, '');
            var i = 0;
            const brac = this.props.start;
            const lim = brac + this.props.qtyPerPage;
//the filter below works for resources but I want all to be filtered and show in the list in previous code snippet
                this.props.list.filter(u=>u.AddInfo == "resource").map((article)=>{
                        var artText = (article.enTitle + " " + article.URL + " " + article.enDescription + " " + article.AddInfo).toLowerCase().replace(/[^a-z0-9]/g, '');
                        if(artText.indexOf(searchText)===-1){
                            return;
                        }
                        i++;
                        if(brac<i && i<lim){
                            liArt.push(
                                    <ListArticle key={article.Image+article.URL} 
                                        title={article.enTitle}
                                        image={article.Image+"?h=100&mode=crop&scale=down"}
                                        link={JSON.stringify(article.HasLandingPage).toUpperCase()=="TRUE" ? "/en/"+article.URL : "/" + article.URL}
                                        desc={article.enDescription}
                                        kind={article.AddInfo.includes("SKU") ? " Product" : (article.AddInfo.includes("resource") ? " Resource" : " Page")} />
                            );//push
                        } //limit check  
                });//map
            return (
                <div className="search-page-listbox">
                    {liArt}
                </div>
                );
   }
}

```