Hi I'm working on an application built with react native and the problem is I have data from a JSON file and I want when a user put his name, the name talked into another screen where the meaning of his name is. but I can't get the corresponded letter for each letter in his name. example: SO here Tag Is Handled The Searched keyword

Then I Passed the data from to another screen where it should split the keyword and print each letter in a separated line

Here is DATA file in Json Format

Question: How can I get The Correspondent DESC for each letter? Thanks

INPUTNAME.js

import React, { useState, useEffect } from 'react';
import { SafeAreaView, StyleSheet, FlatList } from 'react-native';
import { Text, Button, Layout, Divider, Icon} from '@ui-kitten/components';
import { ThemeContext } from '../../Components/theme-context';
import { Switch, TextInput } from 'react-native-paper';

import { SearchBar } from 'react-native-elements';

const InputNames = ({navigation}) => {
  const themeContext = React.useContext(ThemeContext);
  const [name, setName] = useState('');
  const shakeIconRef = React.useRef();
  const renderShakeIcon = (props) => (
    <Icon
      {...props}
      ref={shakeIconRef}
      animation='shake'
      name='shake'
    />
  );

    const navigateDetails = () => {
      navigation.navigate('GetDetails', {
        name: name
      });
    };
    const Shakeit = () => {
      shakeIconRef.current.startAnimation();
    }
    
  const onPress = () => {
    Shakeit();
    setTimeout(navigateDetails, 500);
    }
    const itemView = ({item}) => (
        <Text>
          {item.name}
        </Text>
      
    )
  
  return (
    <SafeAreaView style={{ flex: 1, flexDirection: 'column' }}>
      <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text category='h1' status='danger'>HALLO</Text>
        <TextInput
         
          style={styles.textIn}
          label=" Your name"
          textAlign='right'
          value={name}
          onChangeText={(text) => setName(text)}
        />

      
        <Button
        appearance='ghost'
        status='warning'
        style={styles.button}
        disabled={!name}
        accessoryLeft={renderShakeIcon}
        onPress={onPress}>
        DO it!
      </Button>
      </Layout>
     
    </SafeAreaView>
  );
};


export default InputNames

GETDETAILS.js

import * as React from 'react';
import { SafeAreaView, View, StyleSheet, FlatList } from 'react-native';
import { Divider, Icon, Layout, Text, TopNavigation, TopNavigationAction } from '@ui-kitten/components';
import { useRoute } from '@react-navigation/native';

const data =  [
{"text": "A", "desc" : "Some Description"},
]

const BackIcon = (props) => (
  <Icon {...props} name='arrow-back' />
);

const GetDetails = ({ navigation }) => {


  const navigateBack = () => {
    navigation.goBack();
  };

  const BackAction = () => (
    <TopNavigationAction icon={BackIcon} onPress={navigateBack}/>
  );


    const route = useRoute();
    
    const title = route.params.name.split('').join(` => \n`);
    const searchdesc = data.filter(function (item) {
      return item.text.includes(title);
    }).map(function ({text, desc}) {
      return {text, desc}
    })

   const renderItem = ({item, searchdesc}) => {
    return (
      <View>
        <Text>
          {item.text}{' => '}{item.desc} // Here where i want to show desc
        </Text>
      </View>
    )
   } 
    
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <TopNavigation title='Home' alignment='center' accessoryLeft={BackAction}/>
      <Divider/>
      <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{marginTop: 22}} category='h1'>Details</Text>
        <Divider/>
        <Text category='h2' style={styles.nameInput}>{route.params.name}</Text>


        <Text>{title}</Text>
        <Divider/>
        
       
      </Layout>
     
   
    </SafeAreaView>
  )
};


export default GetDetails
const styles = StyleSheet.create({
  nameInput: {
    color: 'rgba(204, 14, 132, 0.9)',
    borderWidth: 2,
    borderColor: '#fff',
    marginTop: 20,
    borderRadius: 13,
    borderTopEndRadius: 14,
    padding: 18,
  }
})

CodePudding user response：

you mean like this ?

//sample data
const data = [
  {
   text:"A",
   desc:"Amazing"
  },
  {
  text:"N",
  desc:"Nice"
  },
  {
  text:"O",
  desc:"Outstanding"
  },
];

const descEachLetterOfYourName = (text) => {
  const arr = text.split("");
  const newdata = arr.flatMap((item)=>{
    const getFromData = data.filter((x)=>x?.text == item);
    console.log(getFromData);
    return getFromData.length > 0 ? getFromData : [];
  })
  return newdata;
}

//put myname on state and render each item.text or item.desc
const myname = descEachLetterOfYourName("ANON");