Handling input fields in React - Mini Project: Build & Apply

Handling input fields

📖 Scenario: You are building a simple React form where users can type their name. This form will show the typed name below the input box in real-time.

🎯 Goal: Create a React functional component that has an input field. When the user types in the input, the component updates and shows the typed text below the input.

📋 What You'll Learn

Use React functional components

Use the useState hook to manage the input value

Create an input field with a label for accessibility

Display the typed input value below the input field

Update the displayed text as the user types

💡 Why This Matters

🌍 Real World

Handling input fields is essential for forms, search boxes, and interactive user interfaces on websites and apps.

💼 Career

React developers frequently manage input fields and state to build dynamic, user-friendly forms and interfaces.

1

Create the React component and initial state

Create a React functional component called NameInput. Inside it, create a state variable called name with initial value '' using the useState hook.

React

import React, { useState } from 'react';

function NameInput() {
    // Your code here
}

Need a hint?

Remember to import useState from React and call it inside your component to create the name state variable.

2

Add an input field with a label

Inside the NameInput component, return JSX that includes a <label> with text Name: and an <input> field of type text. Connect the label to the input using the htmlFor attribute with value nameInput and set the input's id to nameInput.

React

import React, { useState } from 'react';

function NameInput() {
    const [name, setName] = useState('');

    return (
        // Your code here
    );
}

Need a hint?

Use a div to wrap the label and input. The label's htmlFor must match the input's id.

3

Connect input value and update state on change

Add the value attribute to the input and set it to the name state variable. Add an onChange event handler to the input that updates the name state using setName with the input's current value from event.target.value.

React

import React, { useState } from 'react';

function NameInput() {
    const [name, setName] = useState('');

    return (
        
            Name:
            
        
    );
}

Need a hint?

The onChange handler receives an event. Use event.target.value to get the typed text and update the state.

4

Display the typed name below the input

Below the input field, add a <p> element that displays the text You typed: followed by the current name state variable.

React

import React, { useState } from 'react';

function NameInput() {
    const [name, setName] = useState('');

    return (
        
            Name:
             setName(event.target.value)}
            />
            {/* Add a paragraph below to show the typed name */}
        
    );
}

Need a hint?

Use curly braces {} inside JSX to insert the name state variable inside the paragraph.