How to display warning message of invalid input div in React?

Question

I'm working on a new form in React, where I need to validate inputs and, in case of incorrect input, display alerts individually under each bad input.

What is the better solution?

Create a div in advance under each input and hide and show it with the help of classes.

<label htmlFor="first-name"></label>
<input type="text" name="first-name" id="first-name" />
<div className="invalid-input disable/enable">Please fill in your name.</div>

Create an auxiliary function that performs validation and then adds this warning div under each input.

const div = document.createElement("div")
div.innerHTML = "Please fill in your name.";

const input = document.getElementById("first-name");
insertAfter(div, input);

What is conventionally correct?

Kirill · Accepted Answer · 2022-04-03 14:02:51Z

1

You can create an error state as a boolean variable or object with errors for each field using useState.

const [error, setError] = useState(false)

Further display an error through such a record:

{error && <div>message error</div>}

If errors = false, then the message does not appear

answered Apr 3, 2022 at 14:02

Kirill

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display warning message of invalid input div in React?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related