Studying React-Native is like — 7 (multiple components)

We know that the more we add functions, the more components getting bigger. So, let’s split components into small components. So, we can make codes shorter.

Make a folder name ‘components’ and we can see this.

Let’s make a GoalItem.js first.

import { StyleSheet, View, Text } from "react-native"

function GoalItem(props) {
    return <View style={styles.goalItem} >
    <Text style={styles.goalText}>{props.value}</Text>
  </View>
}

export default GoalItem

const styles = StyleSheet.create({
    goalItem:{
        margin : 8,
        padding : 8,
        borderRadius : 6,
        backgroundColor : 'pink',
        color: 'white'
    },

    goalText : {
        color : 'white',
    }
});

We moved this components code(View components) to GoalItem.js from App.js

<FlatList data={courseGoals} renderItem={(itemData) => {
    return (
      <View style={styles.goalItem} > 
        <Text style={styles.goalText}>{itemData.item.text}</Text>
      </View>
    )
  }}

And we chang this code to use GoalItem components.

<FlatList data={courseGoals} renderItem={(itemData) => {
  return <GoalItem value={itemData.item.text} />
}}

Now let’s look closer to GoalItem.js first.

First, we made GoalItem components with ‘props’. It is like a functional arguments. GoalItem return codes we made from App.js. The difference between GoalItem components and original code is that we put ‘props.value’ instead of ‘itemData.item.text’.

Because we define GoalItem ‘value={itemData.item.text}’ as a parameter in App.js. So, ‘value’ get {itemData.item.text} and GoalItem get texts from it.

Moreover, we added export default GoalItem to use it from App.js. We put more style elements in GoalItem.js to use them from GoalItem component.

We use StyleSheet so we imported StylesSheet from react-native and created it to const.

Let’s write down codes for GoalInput.js.

this is GoalInput.js

import { View, StyleSheet, TextInput, Button } from "react-native";
import { useState } from "react";

function GoalInput (props){
    const [enteredGoalText, setEnteredText] =useState("");

    function textInputHandler(enteredText) {
        setEnteredText(enteredText);
    };
    
    function addGoalHandler(){
        props.onAddGoal(enteredGoalText);
        setEnteredText('')
    }

    return (
        <View style={styles.inputContainer}>
            <TextInput 
            style={styles.textInput} 
            placeholder='this is input!'
            onChangeText={textInputHandler}
            value={enteredGoalText} />
            <Button title='add your thing!' 
            onPress={addGoalHandler}/>
        </View >
    )
    
};

export default GoalInput

const styles = StyleSheet.create({
        inputContainer : {
        flex : 1,
        flexDirection: 'row',
        justifyContent : 'space-between',
        alignItems : 'center',
        marginBottom : 20,
        borderBottomWidth : 1,
        borderBottomColor : 'skyblue'
    },

    textInput : {
        borderWidth : 1,
        borderColor : '#cccccc',
        width:'60%',
        marginRight : 8,
        padding : 8
    },
})

This code is from App.js

<View style={styles.inputContainer}>
  <TextInput 
  style={styles.textInput} 
  placeholder='this is input!'
  onChangeText={textInputHandler}/>
  <Button title='add your thing!' 
  onPress={addGoalHandler}/>
</View >

To use this code, we need to bring ‘addGoalHandler’ to GoalInput.js.

In those code, we need to use ‘addGoalHandler’ and ‘textInputHandler’ from App.js. So i added them into GoalInput.js.

Moreover, i wanted to remove input text after click the button. So i made ‘addGoalHandler’. But why just put ‘onPress={props.onAddGoal}’ ?

Because we gonna use ‘enteredGoalText’ for argument of ‘onAddGoal’.

In summary,

1. addGoalHandler func in App.js needs enterdGoal if i remove “const [enteredGoalText, setEnteredText] =useState(“”);”. So i made a argument to addGoalHandler in App.js
2. But in GoalInput.js, onPress={props.onAddGoal} is not working when we use enteredGoal. So, we make a function AddGoalHandler with props.onAddGoal(enteredGoal) instead of just this onPress={props.onAddGoal}.