CODEWITHSUNDEEP
javascriptarraysreactjsreact-nativereact-native-flatlist
Samuel Edeh
Samuel Edeh

Reputation: 69

How to search mapped list in react native

I have been finding it very difficult to search a mapped list in react native. Actually, doing that with a Flatlist would be very easy for me, but this is really giving me a headache. I hope someone will be able to help me out.

So, the code looks like this

import React, { Component, useState } from 'react';
import { Button,  Animated, Share, ScrollView,
  ImageBackground, StyleSheet, View} from "react-native";
import { Container, Header, Content, ListItem, Item, Input, Text, Icon, Left, Body, Right, Switch } from 'native-base';

const Auslawpart = ({ route, navigation}) => {
  const {parts, hereme} = route.params;
  const [search, setSearch] = useState('');
  const [filteredDataSource, setFilteredDataSource] = useState(parts);


 const filterSearch = (text) => {
    const newData = parts.filter((part)=>{
      const itemData = part.name.toUpperCase()
      const textData = text.toUpperCase()
      return itemData.indexOf(textData)>-1
    });
    setFilteredDataSource(newData);
      setSearch(text);
  }


 
  return (
    <Container>
    
   

     <Animated.View
      style={{
        transform:[
          {translateY:translateY }
        ],
        elevation:4,
        zIndex:100,
      }}
      >

<View style={{
       // marginTop:Constant.statusBarHeight,
       position:"absolute",
       
        top:0,
        left:0,
        right:0,
        bottom: 0,
        height: 50,
        backgroundColor:"#f0f0f0",
        borderBottomWidth: 1,
      borderBottomColor: '#BDC3C7',
        flexDirection:"row",
        justifyContent:"space-between",
        elevation: 4,
    }}>

    

      <View style={{margin: 10, flex: 1 }}>
         <TouchableOpacity  onPress={() => navigation.goBack()}>
        <Icon type="MaterialIcons" name="arrow-back" style={{ left: 10, }}
        size={50}  />
        </TouchableOpacity>
      </View>
      <View style={{
          
          justifyContent:"space-around",
          margin: 4,
flex: 1,
marginLeft:0,
         
      }}>


            
         <Text numberOfLines={3} style={{fontSize:10,
          alignSelf: 'flex-end',  color:"#212F3C", 
          padding: 2}}>{hereme}</Text>   
         
      </View>
   
    </View>

    </Animated.View>

    <Content style={{marginTop:50}}>
    
    <Item>
      <Icon type= "MaterialIcons" />
      <Input placeholder="Search legal terms and maxisms"
      onChangeText={(text) => filterSearch(text)}
       />
      <Icon type="Octicons" name="law" />
    </Item>

   
  
    
{parts.map((part) => (
  <TouchableOpacity
          key={part.name}
          
        >
<ListItem onPress={() =>
            navigation.navigate("Auslawcount", { 
              meaning: part.meaning, 
              partname: part.name})
          }>

              
<Icon type="Octicons"  name="law" />
<Body>
<Text onScroll={(e)=>{
          scrollY.setValue(e.nativeEvent.contentOffset.y) 
      }} style={{ fontSize: 17,  fontFamily: "Lato-Regular",}} key={part.name}>{part.name.toUpperCase()}</Text>
</Body>  
</ListItem>




</TouchableOpacity>

            ))}
            
            
            </Content>
</Container>
  );
};


export default Auslawpart;

The data in part.name are passed from another screen to this screen. I am try to make the Input field search through the mapped part.name. can anybody please help me with a solution.

Upvotes: 0

Views: 295

Answers (1)

Ashwith Saldanha
Ashwith Saldanha

Reputation: 1738

Here is an Example

snack: https://snack.expo.io/@ashwith00/bold-waffles


const data = [
  { name: 'Suleman' },
  { name: 'Sulan' },
  { name: 'Suljan' },
  { name: 'Ram' },
  { name: 'Raj' },
];

const Auslawpart = ({ route, navigation }) => {

const {} = route.params;
  const [filteredDataSource, setFilteredDataSource] = useState(parts);

  const filterSearch = (text) => {
    if (text.length > 0) {
      const newList = data.filter((part) => {
        const name = part.name.toUpperCase();
        const textData = text.toUpperCase();
        return name.includes(textData);
      });
      setFilteredDataSource(newList);
    } else {
      setFilteredDataSource(parts);
    }
  };

  return (
    <View>
      <TextInput placeholder="Enter here" onChangeText={filterSearch} />
      <ScrollView>
        {filteredDataSource.map((item, i) => (
          <Text key={i} style={{ paddingVertical: 30 }}>
            {item.name}
          </Text>
        ))}
      </ScrollView>
    </View>
  );
};

Upvotes: 1

Related Questions