Default Values for Props

A missing prop does not print the word undefined on the screen, which surprises many people who are new to JSX. It prints nothing at all. We rendered this component and left out role:

import { View, Text } from 'react-native';

const UserProfile = ({ name, role }) => {
  return (
    <View>
      <Text>Name: {name}</Text>
      <Text>Role: {role}</Text>
    </View>
  );
};

const App = () => {
  return (
    <View>
      <UserProfile name="John Doe" />
    </View>
  );
};

export default App;

Name: John Doe
Role:

React shows nothing for `undefined