Destructuring Props

Why write props.name and props.job on every line when the component only ever uses those two values? JavaScript has a feature for this situation, called destructuring. It takes named properties out of an object and puts them in variables of the same name.

The Starting Point

So far, UserProfile has read every value through the props object:

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

const UserProfile = (props) => {
  return (
    <View>
      <Text>Name: {props.name}</Text>
      <Text>Job: {props.job}</Text>
    </View>
  );
};

const App = () => {
  return (