Picker and date picker in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Picker selection updates state correctly

What will be the value of selectedFruit after selecting "Banana" from the Picker?

React Native

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { Picker } from '@react-native-picker/picker';

export default function FruitPicker() {
  const [selectedFruit, setSelectedFruit] = useState('Apple');

  return (
    <View>
      <Picker
        selectedValue={selectedFruit}
        onValueChange={(itemValue) => setSelectedFruit(itemValue)}
      >
        <Picker.Item label="Apple" value="Apple" />
        <Picker.Item label="Banana" value="Banana" />
        <Picker.Item label="Cherry" value="Cherry" />
      </Picker>
      <Text>Selected: {selectedFruit}</Text>
    </View>
  );
}

A "Banana"

B "Apple"

C "Cherry"

D undefined

💡 Hint

The onValueChange updates the state with the selected value.

When the user selects "Banana", the onValueChange callback sets selectedFruit to "Banana". The Text component then shows "Selected: Banana".

❓ ui_behavior

intermediate

DatePicker initial date and change behavior

Given the code below, what will be displayed in the Text component after the user picks March 15, 2024?

React Native

import React, { useState } from 'react';
import { View, Text, Button, Platform } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

export default function DatePickerExample() {
  const [date, setDate] = useState(new Date(2023, 0, 1));
  const [show, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
    setShow(Platform.OS === 'ios');
    if (selectedDate) {
      setDate(selectedDate);
    }
  };

  return (
    <View>
      <Button title="Pick a date" onPress={() => setShow(true)} />
      {show && (
        <DateTimePicker
          value={date}
          mode="date"
          display="default"
          onChange={onChange}
        />
      )}
      <Text>Selected date: {date.toDateString()}</Text>
    </View>
  );
}

A Selected date: Thu Mar 14 2024

B Selected date: Fri Mar 15 2024

C Selected date: Sun Jan 01 2023

D Selected date: undefined

💡 Hint

The onChange updates the date state with the picked date.

When the user picks March 15, 2024, the onChange sets date to that date. The Text component shows the date in a readable string format.

❓ lifecycle

advanced

DatePicker visibility on Android vs iOS

Why does the DateTimePicker disappear immediately after selecting a date on Android but not on iOS in the code below?

React Native

const onChange = (event, selectedDate) => {
  setShow(Platform.OS === 'ios');
  if (selectedDate) {
    setDate(selectedDate);
  }
};

A Because on iOS, <code>setShow(false)</code> is called immediately after selection.

B Because on iOS, the picker does not call <code>onChange</code> after selection.

C Because on Android, the picker is not rendered at all.

D Because on Android, <code>setShow(false)</code> hides the picker after selection; on iOS, it stays visible.

💡 Hint

Check how setShow is set depending on platform.

The code sets show to false on Android after selection, hiding the picker. On iOS, it remains true, so the picker stays visible.

📝 Syntax

advanced

Correct syntax for Picker.Item inside Picker

Which option shows the correct syntax to add a Picker.Item with label "Orange" and value "orange" inside a Picker?

A <Picker.Item label='Orange' value=orange />

B <Picker.Item label=Orange value="orange" />

C <Picker.Item label="Orange" value="orange" />

D <Picker.Item label="Orange" value="orange"> </Picker.Item>

💡 Hint

Remember JSX syntax requires quotes around string props.

Option C uses correct JSX syntax with double quotes around string props and self-closing tag.

🔧 Debug

expert

Why does the DatePicker not update the displayed date?

Given the code below, why does the displayed date never change after picking a new date?

React Native

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

export default function BrokenDatePicker() {
  const [date, setDate] = useState(new Date());
  const [show, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
    setShow(false);
    if (selectedDate) {
      date = selectedDate;
    }
  };

  return (
    <View>
      <Button title="Pick date" onPress={() => setShow(true)} />
      {show && <DateTimePicker value={date} mode="date" onChange={onChange} />}
      <Text>Selected date: {date.toDateString()}</Text>
    </View>
  );
}

A Because the code assigns to the variable 'date' directly instead of using setDate to update state.

B Because the DateTimePicker component is missing the 'display' prop.

C Because the initial state date is not set to a valid Date object.

D Because the onChange callback does not call setShow(true).

💡 Hint

In React, state must be updated with the setter function, not by direct assignment.

The line date = selectedDate; only changes the local variable, not the React state. The component does not re-render with the new date.