How to add mandatory symbol in react js?

July 27, 2024

Hi Friends 👋,

Welcome To aHoisting!

To add mandatory symbol in react js, you can use * in label. It will add mandatory symbol in react js.

Today, I am going to show you, how to add mandatory symbol in react js.

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component. To do this, add the following mandatory symbol to the top of your component file.

import React from 'react';

Step 3: Create a Component.

You can use * to add mandatory symbol in react js.

<form onSubmit={handleSubmit}>
      <div>
        <label>
          Name <span style={{ color: 'red' }}>*</span>:
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
            required
          />
        </label>
      </div>
      <div>
        <label>
          Email <span style={{ color: 'red' }}>*</span>:
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            required
          />
        </label>
      </div>
  <button type="submit">Submit</button>
</form>

Add mandatory symbol example.

The below code is an example of a React. You have to import React and set * to add mandatory symbol in react js.

App.js

import React, { useState } from 'react';

function App () {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (formData.name && formData.email) {
      alert('Form submitted successfully');
    } else {
      alert('Please fill out all required fields');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Name <span style={{ color: 'red' }}>*</span>:
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
            required
          />
        </label>
      </div>
      <div>
        <label>
          Email <span style={{ color: 'red' }}>*</span>:
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            required
          />
        </label>
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

In the above code esxample, I have used the * to add mandatory symbol in react js.

Check the output of the above code.

All the best 👍