Picker and date picker in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Picker component from @react-native-picker/picker.

React Native

import { [1] } from '@react-native-picker/picker';

Drag options to blanks, or click blank then click option'

ASelect

BDatePicker

CPicker

DDropdown

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'DatePicker' instead of 'Picker'.

Trying to import 'Select' which is not from this package.

The Picker component is imported from '@react-native-picker/picker' as Picker.

2fill in blank

medium

Complete the code to set the selected value state for the Picker component.

React Native

const [selectedValue, setSelectedValue] = useState([1]);

Drag options to blanks, or click blank then click option'

A"java"

Bnull

C0

D""

Attempts:

3 left

💡 Hint

Common Mistakes

Setting initial value to null or empty string which does not match any Picker item.

Using a number instead of a string.

The initial selected value is set to the string "java" to match one of the Picker items.

3fill in blank

hard

Fix the error in the Picker onValueChange handler to update the selected value.

React Native

<Picker
  selectedValue={selectedValue}
  onValueChange={(itemValue, itemIndex) => [1]
>

Drag options to blanks, or click blank then click option'

AsetSelectedValue(itemIndex)

BsetSelectedValue(itemValue)

CselectedValue = itemValue

DsetSelectedValue()

Attempts:

3 left

💡 Hint

Common Mistakes

Passing itemIndex instead of itemValue.

Trying to assign directly to selectedValue which is read-only.

The onValueChange handler should call setSelectedValue with the new itemValue to update the state.

4fill in blank

hard

Fill both blanks to create a DateTimePicker that shows when showPicker is true and updates the date state.

React Native

const [date, setDate] = useState(new Date());
const [showPicker, setShowPicker] = useState(false);

<DateTimePicker
  value={date}
  mode=[1]
  display="default"
  onChange={(event, selectedDate) => {
    setShowPicker(false);
    if (selectedDate) {
      [2];
    }
  }}
/>

Drag options to blanks, or click blank then click option'

A"date"

BsetDate(selectedDate)

CsetDate(event)

D"time"

Attempts:

3 left

💡 Hint

Common Mistakes

Using mode "time" instead of "date".

Calling setDate with the event object instead of selectedDate.

The mode should be set to "date" to pick a date, and the onChange handler should update the date state by calling setDate(selectedDate).

5fill in blank

hard

Fill all three blanks to show the Picker with three items and update the selected value on change.

React Native

const [selected, setSelected] = useState("apple");

<Picker
  [3]=[1]
  onValueChange={value => [2]
>
  <Picker.Item label="Apple" value="apple" />
  <Picker.Item label="Banana" value="banana" />
  <Picker.Item label="Cherry" value="cherry" />
</Picker>

Drag options to blanks, or click blank then click option'

Aselected

BsetSelected(value)

CsetSelectedValue(value)

DselectedValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong setter function name like setSelectedValue instead of setSelected.

Confusing the prop name with the state variable.

The Picker's selectedValue prop should be the state variable selected. The onValueChange handler should call setSelected(value) to update the state. The last blank is the prop name selectedValue used in the Picker component.