I can't pass multiple state items to other screen?

user_10184322 0
Viewed 205

thanks in advance for reading.

I have 2 screens in this react native project that I'm working on. One is an "input" screen, where I have a few text inputs to gather data from user. The other is an "output" screen, which simply displays on the screen the text that the user inputted on the "input" screen.

I started off with just one text input on the "input" screen which I then was able to send to the "output" screen and successfully display.

The issue arose when I wanted to add more text inputs on the "input" screen because I needed more pieces of data.

Once I did this and tried to send all of the data (as opposed to just sending the initial one piece of data), for some reason instead of successfully retrieving all 3 pieces of data, the only data that gets successfully displayed on the "output" screen is the last input that I typed into before pressing submit.

Here is the input screen:

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


export default class InputScreen extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            home: {
                h1: "",
                h2: "",
                h3: "",
                h4: "",
                h5: "",
                h6: "",
                h7: "",
                h8: "",
                h9: "",
                h10: "",
                h11: ""
            },
            away: {
                a1: "",
                a2: "",
                a3: "",
                a4: "",
                a5: "",
                a6: "",
                a7: "",
                a8: "",
                a9: "",
                a10: "",
                a11: ""
            }
        };
    }

    static navigationOptions = {
        title: "Input",
        headerStyle: {
            backgroundColor: "red"
        },
        headerTitleStyle: {
            fontWeight: "bold"
        }
    };

    render() {
        const { navigate } = this.props.navigation;
        return (
            <View style={styles.container}>
                <TextInput 
                value={this.state.home.h1}
                onChangeText={inputtedValue => this.setState({...this.state, home: {h1: inputtedValue}})}
                placeholder="Enter your first home fake iMessage here"
                style={styles.textInput}
                />
                <TextInput 
                value={this.state.home.h2}
                onChangeText={inputtedValue => this.setState({...this.state, home: {h2: inputtedValue}})}
                placeholder="Enter your second home fake iMessage here"
                style={styles.textInput}
                />
                <TextInput 
                value={this.state.home.h3}
                onChangeText={inputtedValue => this.setState({...this.state, home: {h3: inputtedValue}})}
                placeholder="Enter your third home fake iMessage here"
                style={styles.textInput}
                />
                <View style={styles.buttonStyle}>
                    <Button
                    title="Submit"
                    onPress={() => 
                    this.props.navigation.navigate('Output', {
                        h1: this.state.home.h1,
                        h2: this.state.home.h2,
                        h3: this.state.home.h3,
                        otherParam: '101'
                    })
                    }
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({  
    container: {  
        flex: 1,  
        backgroundColor: '#fff',  
        alignItems: 'center',  
        padding: 16,  
    },  
    textInput: {  
        height: 45,width: "95%",borderColor: "gray",borderWidth: 1,fontSize:20,  
    },  
    buttonStyle:{  
        width: "93%",  
        marginTop: 50,  
        backgroundColor: "red",  
    }  
});

And here is the output screen:

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


export default class OutputScreen extends React.Component {
  static navigationOptions = {
    title: "Ouput",
    headerStyle: {
      backgroundColor: "green"
    },
    headerTitleStyle: {
      fontWeight: "bold"
    }
  };

  render() {
    const { navigation } = this.props;
    const home_message_one = navigation.getParam("h1", "no message");
    const home_message_two = navigation.getParam("h2", "no message");
    const home_message_three = navigation.getParam("h3", "no message");
    const home_message_four = navigation.getParam("h4", "no message");
    const home_message_five = navigation.getParam("h5", "no message");
    const home_message_six = navigation.getParam("h6", "no message");
    const home_message_seven = navigation.getParam("h7", "no message");
    const home_message_eight = navigation.getParam("h8", "no message");
    const home_message_nine = navigation.getParam("h9", "no message");
    const home_message_ten = navigation.getParam("h10", "no message");
    const home_message_eleven = navigation.getParam("h11", "no message");
    const other_param = navigation.getParam("otherParam", "some default value");
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text style={{ marginTop: 16,fontSize: 20,}}>
          This is output screen and we recieve value from input screen
        </Text>
        <Text style={styles.textStyle}>Home Message One: {JSON.stringify(home_message_one)}</Text>
        <Text style={styles.textStyle}>Home Message Two: {JSON.stringify(home_message_two)}</Text> 
        <Text style={styles.textStyle}>Home Message Two: {JSON.stringify(home_message_three)}</Text>      
        <Text style={styles.textStyle}>Home Message Four: {JSON.stringify(home_message_four)}</Text> 
        <Text style={styles.textStyle}>Home Message Five: {JSON.stringify(home_message_five)}</Text> 
        <Text style={styles.textStyle}>Home Message Six: {JSON.stringify(home_message_six)}</Text> 
        <Text style={styles.textStyle}>Home Message Seven: {JSON.stringify(home_message_seven)}</Text> 
        <Text style={styles.textStyle}>Home Message Eight: {JSON.stringify(home_message_eight)}</Text> 
        <Text style={styles.textStyle}>Home Message Nine: {JSON.stringify(home_message_nine)}</Text> 
        <Text style={styles.textStyle}>Home Message Ten: {JSON.stringify(home_message_ten)}</Text> 
        <Text style={styles.textStyle}>Home Message Eleven: {JSON.stringify(home_message_eleven)}</Text> 
        {/* <Text style={styles.textStyle}>Other Param: {JSON.stringify(other_param)}</Text> */}
        <View style={styles.buttonStyle}>
          <Button 
            title="Go back"
            onPress={() => this.props.navigation.goBack()}
            />
            </View>
            </View>
    );
  }
}

const styles = StyleSheet.create({  
  textStyle: {  
      fontSize: 23,  
      textAlign: 'center',  
      color: '#f00',  
  },  

  buttonStyle:{  
      width: "93%",  
      marginTop: 50,  
      backgroundColor: "red",  
  }  
});

Can anyone help me understand why all 3 pieces of data are not being successfully displayed, but rather only the last text input's data that I typed into before pressing submit? Do I need to create a form or something?

Thanks, Mark

react-navigation react-native reactjs javascript
2 Answers

Each input is overwriting the nested state.

onChangeText={inputtedValue => this.setState({
  ...this.state,
  home: {
    h1: inputtedValue, // <-- drops h2, h3, h4, ...etc...
  },
})}

React handles shallow merges of the root properties but doesn't go deeper than this, so you need to shallow copy the nested state that is being updated.

<TextInput 
  value={this.state.home.h1}
  onChangeText={inputtedValue => this.setState(prevState => ({
    home: {
      ...prevState.home, // <-- copies h2, h3, h4, ...etc...
      h1: inputtedValue
    },
  }))}
  placeholder="Enter your first home fake iMessage here"
  style={styles.textInput}
/>
user_86908570

input screen

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


export default class InputScreen extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            home: {
                h1: "",
                h2: "",
            }
        };
    }



    render() {
        const { navigate } = this.props.navigation;
        return (
            <View>
                <TextInput 
                value={this.state.home.h1}
                onChangeText={inputtedValue => this.setState({home: {...this.state.home,h1: inputtedValue}})}
                />
                <TextInput 
                value={this.state.home.h2}
                onChangeText={inputtedValue => this.setState({home: {...this.state.home,h2: inputtedValue}})}
                />
                <View>
                    <Button
                    title="Submit"
                    onPress={() => {
                    navigate('Output', {...this.state.home})
                    }}
                    />
                </View>
            </View>
        );
    }
}

output screen

if you use class components

class OutputScreen extends React.component{
constructor(props){}
render(){
   const params = this.props.route.params;
   return <Text>h1:{params?.h1} || h2: {params?.h2}</Text>
   }
}
export default OutputScreen;

if you use functional components

const OutputScreen = ()=>{
 const route = useRoute();
 const {params} = route;
 return <Text>h1:{params?.h1} || h2: {params?.h2}</Text> 
}
export default OutputScreen;
user_105368060
Related