How to see the full details of particular member when it is clicked after search?

user_15362465 0
Viewed 82

I have build a search engine and I am able to fetch data successfully the only thing I want to do is whenever that searched field is selected, it will show the details. (There are further details are also present like age,house_no etc.) It is like another screen have to come with full details.

I am stuck here, please help me out. It is like navigation to another screen with full details for now I am using alert command to show the some details I want another screen please. Thanks.

import React, {useState, useEffect} from 'react';
import {
  SafeAreaView,
  Text,
  StyleSheet,
  View,
  FlatList,
  TextInput,
} from 'react-native';
import { db } from '../firebase';

const App = () => {
  const [search, setSearch] = useState('');
  const [filteredDataSource, setFilteredDataSource] = useState([]);
  const [masterDataSource, setMasterDataSource] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
        const data = await db
            .collection('Data')
            .get();
            setFilteredDataSource(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
            setMasterDataSource(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    };
    fetchData();
}, []);

  const searchFilterFunction = (text) => {

    if (text) {
      const newData = masterDataSource.filter(
        function (item) {
          const itemData = item.FM_NAME_EN + item.EPIC_NO + item.MOBILE_NO
            ? item.FM_NAME_EN.toUpperCase() + item.EPIC_NO.toUpperCase() + item.MOBILE_NO
            : ''.toUpperCase();
          const textData = text.toUpperCase();
          return itemData.indexOf(textData) > -1;
      });
      setFilteredDataSource(newData);
      setSearch(text);
    } else {
      setFilteredDataSource(masterDataSource);
      setSearch(text);
    }
  };

  const ItemView = ({item}) => {
    return (
      <Text
        style={styles.itemStyle}
        onPress={() => getItem(item)}>
        {item.FM_NAME_EN}
        {'\n'}
        {item.GENDER.toUpperCase()}
      </Text>
    );
  };

  const ItemSeparatorView = () => {
    return (
      // Flat List Item Separator
      <View
        style={{
          height: 0.5,
          width: '100%',
          backgroundColor: '#C8C8C8',
        }}
      />
    );
  };

  const getItem = (item) => {
    alert('Name : ' + item.FM_NAME_EN + ' Epic_no : ' + item.EPIC_NO);
  };

  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <TextInput
          style={styles.textInputStyle}
          onChangeText={(text) => searchFilterFunction(text)}
          value={search}
          underlineColorAndroid="transparent"
          placeholder="Search Here"
        />
        <FlatList
          data={filteredDataSource}
          keyExtractor={(item, index) => index.toString()}
          ItemSeparatorComponent={ItemSeparatorView}
          renderItem={ItemView}
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
  },
  itemStyle: {
    padding: 10,
  },
  textInputStyle: {
    height: 40,
    borderWidth: 1,
    paddingLeft: 20,
    margin: 5,
    borderColor: '#009688',
    backgroundColor: '#FFFFFF',
  },
});

export default App;
hybrid-mobile-app mobile-development react-native reactjs
2 Answers

If I understood your question correctly, you need another route:

First, create a component for the new page that will display the details:

ItemDetails.js:

import { useParams } from 'react-router-dom' //You will get the params from the url
import {useState, useEffect} from 'react'

export const ItemDetails = props => {
  const { id } = useParams()
  
  const [item, setItem] = useState(null)
  useEffect(() => {
    if(id){
      const itemSelected = /* get your item by id */
      setItem(itemSelected)
    }
  }, [id])

  return(
   <p> {item.name} </p>
   )
}

Wherever you define your routes:

import {ItemDetails} from './path/to/ItemDetails/'

<Switch>
   ...
   <Route exact path="/item/:id" component={ItemDetails} />
   ...
<Switch>

Lastly, wrap your jsx with react-router link:

import { Link } from 'react-router-dom'

...
return (
   <Link to={`/item/${item.id}`}>
      <Text
        style={styles.itemStyle}
        {item.FM_NAME_EN}
        {'\n'}
        {item.GENDER.toUpperCase()}
      </Text>
    </Link>
    );
user_123586930

first of all, you have to create ItemDetails.js as the new component for the new screen:

import React from 'react';
import {Text, View} from 'react-native';

const ItemDetails= () => {
  return (
    <View>
    <Text>ItemDetails screen</Text>
    </View>
  );
};

export default ItemDetails;

then, make sure to install react native navigation and go to create a new screen:

 <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}>
      <Stack.Screen name="ItemDetails" component={ItemDetails} />
    </Stack.Navigator>

then get back to the app component and modify your getItem function to this:

   const getItem  = item => {
    navigation.navigate('ItemDetails', {item});
  };

this is how you tell the application that it has to move to another screen, and you sent the specific item with it, now let's modify our ItemDetails.js to see the data:

const ItemDetails = ({route}) => {
//console.log(route.params) so you can know how to access whatever you want to print
  return (
    <View>
            <Text>{route.params.item.item.FM_NAME_EN}</Text>
    </View>
  );
};
user_145603850
Related