Form-like interactions in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a text input field in Figma.

Figma

<TextInput placeholder=[1] />

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

A"Submit"

BplaceholderText

CinputField

D"Enter your name"

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name instead of a string.

Omitting the quotes around the placeholder text.

The placeholder attribute sets the hint text inside the input field. Here, it should be a string like "Enter your name".

2fill in blank

medium

Complete the code to add a submit button with a label in Figma.

Figma

<Button label=[1] />

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

A"Submit"

BclickMe

CbuttonLabel

DsubmitBtn

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names instead of string literals.

Forgetting to add quotes around the label.

The label property defines the text shown on the button. It should be a string like "Submit".

3fill in blank

hard

Fix the error in the code to correctly bind the input value to state in Figma.

Figma

const [value, setValue] = useState('');
<TextInput value=[1] onChange={e => setValue(e.target.value)} />

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

Ae.target.value

BsetValue

Cvalue

DinputValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using the setter function as the value prop.

Using an undefined variable for the value.

The value prop should be bound to the state variable value, not the setter function.

4fill in blank

hard

Fill both blanks to create a controlled checkbox input in Figma.

Figma

<Checkbox checked=[1] onChange=[2] />

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

AisChecked

BhandleCheck

Cchecked

DonCheck

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect variable names for checked or onChange.

Not passing a function to onChange.

The checked prop should be bound to a boolean state variable like isChecked. The onChange prop should be a function that updates this state, such as handleCheck.

5fill in blank

hard

Fill all three blanks to handle form submission and reset input in Figma.

Figma

const handleSubmit = (e) => {
  e.[1]();
  console.log(inputValue);
  [2]('');
};
<form onSubmit={handleSubmit}>
  <TextInput value={inputValue} onChange={e => [3](e.target.value)} />
  <Button label="Submit" />
</form>

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

ApreventDefault

BsetInputValue

DstopPropagation

Attempts:

3 left

💡 Hint

Common Mistakes

Using stopPropagation instead of preventDefault.

Not resetting the input value after submit.

Not updating input value on change.

To handle form submission properly, e.preventDefault() stops the page reload. Then, setInputValue('') resets the input. The input's onChange calls setInputValue to update state.