Lifting State Up

Two text fields sit on a screen, and a line below them must greet the user by full name. Each field is its own component with its own state, and the greeting has no way to read either one:

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

function NameInput({ label }) {
  const [value, setValue] = useState('');

  return <TextInput placeholder={label} value={value} onChangeText={setValue} />;
}

function NameScreen() {
  return (
    <View>
      <NameInput label="First name" />
      <NameInput label="Last name" />