I am trying to get this if-else statement working in ReactNative

Question

The goal right now is when they press the button for it to test to see if the inputs have the correct values in them (user and password) if so run the if part of the statement and succeed, otherwise run the fail statement. It keeps giving me formatting errors and this is the first time doing if-else statements on react-native. Again just want to figure out the if-else statement I have tried all the ways I know from Java and Matlab. I also have seen a lot of other answers but from what I can tell they require a function to be called upon but don't explain how to set up that function.

import { StyleSheet, Text, Button, SafeAreaView, TextInput, Image, Alert} from 'react-native';

export default function App() {
const [text, onChangeText] = React.useState(null);
const [name, setname] = useState (null);
const [password, setpassword] = useState ('')

function SuccessGreeting() {
  return Alert.alert('Placeholder Success')
}
function FailGreeting() {
  return Alert.alert('Failed Placeholder')
}

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.Text}>
        Hello! Welcome to the Popgrammers app.
      </Text>
      <Text style={styles.Text}>
        Please Log In.
      </Text>
      <TextInput
        style = {styles.input}
        onChangeText={(name) => setname(name)}
        placeholder = "Enter Username"
        />
      <TextInput
      style = {styles.input}
      onChangeText ={(password) => setpassword (password)}
      placeholder = "Enter Password"
      />
      <Button
        onPress= {
          if (this.name.value == "User") {
            return <SuccessGreeting />;
          },
          else{
            return <FailGreeting/>;
          } 

        title="Log In"
        color="red"
      />
    </SafeAreaView>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'cornflowerblue',
    alignItems: 'center',
    justifyContent: 'center',
  }, 
 input: {
    borderWidth: 1,
    borderColor: '#777',
    padding: 8,
    margin: 10,
    width: 200,
    justifyContent: 'center',
},
  container1: {
    flex: 1,
    justifyContent: 'center',
    marginHorizontal: 200,
  },
  Text: {
    fontSize: 14,
    color: 'red',
    textAlign: 'center',
  }
}); 

Answer 1

<Button
  onPress={() => {
    this.name.value == "User" ? SuccessGreeting() : FailGreeting();
  }}
  title="Log In"
  color="red"
/>

Answer 2

I would like to add something to Kishan Bharda's answer.

Judging from your code, you might be mixing up JSX functional components and JS functions. If we write

function SuccessGreeting() {
  return <Text>Greeting</Text>
}
function FailGreeting() {
  return <Text>This has failed</Text>
}

then these are JSX functional components that return a react-native Text component and we can render it in a screen using

<SuccessGreeting />
<FailGreeting />

(in this case it is standard to start the function name with a capital letter)

The nice thing about JSX is that we can mix in Javascript, e.g. for conditionally rendering components. Here is an example.

return (
    <SafeAreaView style={styles.container}>
        {
             name === "User" ? <SuccessGreeting /> : <FailGreeting />
        }  
    </SafeAreaView>
)

In the return function of a functional component, we can conditionally rendering the component SuccessGreeting or FailGreeting by testing if the state variable name is equal to the string "User".

Notice, that you need curly braces ("{}") in order to start a Javascript statement inside a JSX render method.

The other things are already pointed out by Kishan Bharda, e.g. returning a JSX component inside the onPress function of a Button is not possible, e.g.

<Button
        onPress= {
          if (this.name.value == "User") {
            return <SuccessGreeting />;
          },
          else{
            return <FailGreeting/>;
          } 

        title="Log In"
        color="red"
/>

is not possible. It is also not possible to write

<SuccessGreeting />

at all if the function SuccessGreeting does not return a JSX. Your current function

function SuccessGreeting() {
  return Alert.alert('Placeholder Success')
}

is just a plain JS function. It has nothing to do with react native, but since you are writing Placeholder here you might meant to return an actual JSX component here.