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

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay