My app crashes when rendered text input is null. Undefined error REACT NATIVE-CodePudding

How can I improve the below code so that the app is not crashing when the "input" value is null? I know the issue is with "const { input } = route.params;" If I remove it and add some text input, and put it back, the app works. However, on refresh app will crash when the initial value is null. How to implement the if statement?

Here I am rendering "input", which is TextInput:

export const IznajmiScreen = ({navigation, route}) => {
  const { input } = route.params;
  
  return (
    <>
    <SectionContainer>
      <Text>{input}</Text>
    </SectionContainer>
    </>
  );
  };

And here is my text input Screen:

export const OpciPodaciOglasInput = ({navigation}) => {
const [input, setInput] = useState("");
return( 
    <>
    <Button title="Save"
    onPress={()=>navigation.navigate("Rent a car", {input})}/>
   <InputContainer>
   <TextInput style={styles.input} 
    placeholder="300 maximum"
    multiline = {true}
    maxLength={300}
    onChangeText={(text)=> setInput(text)}
    returnKeyType='done'
    value={input}
    onSubmitEditing={()=>{
      navigation.navigate('Rent a car',{input});
      setInput("");
    }}
    />
    </InputContainer>  
    </>
  );
};

CodePudding user response：

Have you tried adding a ternary.

<Text>{input === null ? "" : input}<Text>