DEV Community

Sahil kashyap
Sahil kashyap

Posted on

React native Search In SectionList

Image of SectionList with Search

SectionList with Search
Requirement: Add search in SectionList of react native

Here's Js code for filtering used

const sectionList = [{
    caption: 'caption1',
    data: [{
        id: '1',
        title: 'Payment',
        description: 'Pay info',
    }, {
        id: '2',
        title: 'Refund',
        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta et ipsam voluptate commodi nulla asperiores corporis, sapiente quasi obcaecati quae totam consequatur cum, perspiciatis pariatur !',
    }, {
        id: '3',
        title: 'Mobs',
        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta et ipsam voluptate commodi nulla asperiores corpori!',
    }, {
        id: '4',
        title: 'test',
        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta et ipsam voluptate commodi nulla',
    }, ],
}, 
{
    caption: 'caption2',
    data: [{
        id: '5',
        title: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae eveniet?',
        description: 'Custom desc',
    },{
        id: '9',
        title: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae eveniet?',
        description: 'Lorem ipsum Custom desc',
    }, ],
}, ];
const query = 'Lorem ipsum' // Not working

const res = sectionList
  .map(d => ({ ...d, data: d.data.filter(c => c.description.includes(query)) }))
  .filter(d => d.data.length)

console.log(res);
Enter fullscreen mode Exit fullscreen mode

Top comments (0)