CODEWITHSUNDEEP
androidreactjsfunctionreact-nativemobile
Ryan
Ryan

Reputation: 41

How to pass text into component in React-Native? (Android)

I'm calling the following function

const LevelCard = (level) => {
    const currLevel = level;
    console.log(currLevel)
    return (
        <View style={{
            flex: 1,
            width: 400,
            alignItems: 'center', 
            justifyContent: 'center'
        }}>
        <CategoryButton
            title='Text should go here'
            onPress={() => navigation.navigate('')}
        />
        </View>
    );
}

from another component

function CallFunction() {
    return (
      <SafeAreaView style={styles.categories}>
        <ScrollView horizontal={true} style={styles.scrollView}>
          <View>

            <LevelCard 
                level="This is the text I want to pass"
            />

          </View>
        </ScrollView>
      </SafeAreaView>
    );
}

but I can't figure out how to actually get the text from 'level' to show up anywhere in the react-native components. The console.log statements work correctly outside of it however.

Thanks

Upvotes: 0

Views: 1439

Answers (1)

Charlie
Charlie

Reputation: 1042

i recomend you to take a look at props in react, in a general way of explaining it, you can think of props like this: "props are to components what arguments are to functions". Right now you are correctly passing the text to your LevelCard Component but you are not retrieving it correctly, props are passed as an object so you have to destructure it from the receiving component:

const LevelCard = ({ level }) => { // <--- Notice this line
  const currLevel = level;
  console.log(currLevel)
  return (
    <View style={{
        flex: 1,
        width: 400,
        alignItems: 'center', 
        justifyContent: 'center'
    }}>
    <CategoryButton
        title={level} {/* then use it like this*/}
        onPress={() => navigation.navigate('')}
    />
    </View>
  );

}

Upvotes: 1

Related Questions