Forms in React

Forms are one of the most important parts of React applications.
Whenever users type into an input field, select an option, click a checkbox, or submit data, React helps us manage that information using state.

In React, forms are usually handled using:

• useState()

• Event handlers

• Controlled components
  freeCodeCamp
  Learn React JS - Full Beginner’s Tutorial & Practice Projects

---

Form Submission

Form submission happens when a user clicks the submit button inside a form.

In normal HTML, submitting a form refreshes the page.
But in React, we usually prevent that refresh using:

event.preventDefault()

Example

import React from "react"

export default function App() {

    function handleSubmit(event) {
        event.preventDefault()
        console.log("Form Submitted")
    }

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" placeholder="Enter name" />
            <button>Submit</button>
        </form>
    )
}

How it works

• onSubmit listens for form submission

• event.preventDefault() stops page refresh

• We can now handle data using JavaScript

---

Form Action

In plain HTML, forms use the action attribute to send data to a server.

<form action="/submit">

But in React, we usually handle everything ourselves using JavaScript functions instead of using action.

React Way

function handleSubmit(event) {
    event.preventDefault()
    console.log("Handled by React")
}

<form onSubmit={handleSubmit}>

This gives React full control over the form data.

---

Forms Textarea

textarea is used when users need to enter large amounts of text.

Example

import React from "react"

export default function App() {

    const [message, setMessage] = React.useState("")

    function handleChange(event) {
        setMessage(event.target.value)
    }

    return (
        <div>
            <textarea
                value={message}
                onChange={handleChange}
                placeholder="Type something..."
            />

            <p>{message}</p>
        </div>
    )
}

Explanation

• value connects textarea to state

• onChange updates state whenever user types

• React controls the textarea completely

This is called a controlled component.

---

Forms Radio

Radio buttons allow users to select only one option from multiple choices.

Example

import React from "react"

export default function App() {

    const [gender, setGender] = React.useState("")

    function handleChange(event) {
        setGender(event.target.value)
    }

    return (
        <form>
            <label>
                <input
                    type="radio"
                    name="gender"
                    value="Male"
                    onChange={handleChange}
                />
                Male
            </label>

            <label>
                <input
                    type="radio"
                    name="gender"
                    value="Female"
                    onChange={handleChange}
                />
                Female
            </label>

            <h3>Selected: {gender}</h3>
        </form>
    )
}

Explanation

• All radio buttons share the same name

• Only one can be selected at a time

• event.target.value gives selected value

---

Forms Checkbox

Checkboxes are used when users can select true or false values.

Example

import React from "react"

export default function App() {

    const [isFriendly, setIsFriendly] = React.useState(false)

    function handleChange(event) {
        setIsFriendly(event.target.checked)
    }

    return (
        <div>
            <input
                type="checkbox"
                checked={isFriendly}
                onChange={handleChange}
            />

            <h3>{isFriendly ? "Friendly" : "Not Friendly"}</h3>
        </div>
    )
}

Explanation

• Checkbox values are handled using checked

• event.target.checked returns true or false

• Perfect for toggles and settings

---

Forms Select and Option

select creates a dropdown menu.

Example

import React from "react"

export default function App() {

    const [favColor, setFavColor] = React.useState("")

    function handleChange(event) {
        setFavColor(event.target.value)
    }

    return (
        <div>
            <select value={favColor} onChange={handleChange}>
                <option value="">Choose Color</option>
                <option value="Red">Red</option>
                <option value="Blue">Blue</option>
                <option value="Green">Green</option>
            </select>

            <h3>Selected: {favColor}</h3>
        </div>
    )
}

Explanation

• select works with value

• option stores selectable values

• React state keeps track of selected option

---

Forms : Object.fromEntries()

Object.fromEntries() converts form data into a JavaScript object.

This is super useful when handling multiple form fields.

Example

import React from "react"

export default function App() {

    function handleSubmit(event) {
        event.preventDefault()

        const formData = new FormData(event.currentTarget)

        const data = Object.fromEntries(formData)

        console.log(data)
    }

    return (
        <form onSubmit={handleSubmit}>

            <input
                type="text"
                name="email"
                placeholder="Email"
            />

            <input
                type="password"
                name="password"
                placeholder="Password"
            />

            <button>Submit</button>
        </form>
    )
}

Output

{
  email: "example@gmail.com",
  password: "123456"
}

Explanation

• FormData() collects all form values

• Object.fromEntries() converts them into an object

• Very clean and modern way to handle forms

---

Conditional Rendering

Conditional rendering means showing different UI based on conditions.

React allows us to display components only when certain conditions are true.

---

Example

export default function Joke(props) {

    return (
        <div>
            {props.setup && <h3>{props.setup}</h3>}

            <p>{props.punchline}</p>

            <hr />
        </div>
    )
}

Explanation

This line:

{props.setup && <h3>{props.setup}</h3>}

uses the && operator.

It means:

• If props.setup exists → show the <h3>

• If it does not exist → render nothing

This is one of the cleanest ways to conditionally render elements in React.

---

Conditional Rendering with State

We can also use state to show or hide elements dynamically.

Example

import React from "react"

export default function Joke(props) {

    const [isShown, setIsShown] = React.useState(false)

    function toggleShown() {
        setIsShown(prev => !prev)
    }

    return (
        <div>

            <p className="setup">
                Setup: {props.setup}
            </p>

            {isShown && <p>{props.punchline}</p>}

            <button onClick={toggleShown}>
                {isShown ? "Hide Punchline" : "Show Punchline"}
            </button>

            <hr />
        </div>
    )
}

Explanation

Step 1

const [isShown, setIsShown] = React.useState(false)

Creates state with default value false.

---

Step 2

function toggleShown() {
    setIsShown(prev => !prev)
}

This toggles the value:

• false → true

• true → false

---

Step 3

{isShown && <p>{props.punchline}</p>}

If isShown is true, React renders the punchline.

---

Step 4

{isShown ? "Hide Punchline" : "Show Punchline"}

This uses a ternary operator.

---

Conditional Rendering : Ternary Operator

A ternary operator is a shortcut for writing if...else.

Syntax

condition ? trueValue : falseValue

Example

{isShown ? "Hide Punchline" : "Show Punchline"}

How it works

• If isShown is true → "Hide Punchline"

• If isShown is false → "Show Punchline"

Ternary operators are commonly used in React because JSX allows expressions directly inside HTML-like code.

---

Final Thoughts

Today I learned how React handles forms and conditional rendering.

Understanding forms is important because almost every real-world application needs user input.

Conditional rendering makes React apps dynamic and interactive by showing UI based on state and conditions.

Day by day React is starting to feel more powerful and more fun to build with 🚀