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

Sentry mobile image

App store rankings love fast apps - mobile vitals can help you get there

Slow startup times, UI hangs, and frozen frames frustrate users—but they’re also fixable. Mobile Vitals help you measure and understand these performance issues so you can optimize your app’s speed and responsiveness. Learn how to use them to reduce friction and improve user experience.

Read full post →

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay