How can I implement input validation in a React application?

How can I implement input validation in a React application?

You can implement input validation in React using controlled components and state management. Would you like a code example?

Yes, please provide a code example for validating a form input.

Here's a simple example:

import React, { useState } from 'react';

const MyForm = () => {
  const [inputValue, setInputValue] = useState('');
  const [error, setError] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
    if (e.target.value.length < 5) {
      setError('Input must be at least 5 characters long.');
    } else {
      setError('');
    }
  };

  return (
    <form>
      <input type="text" value={inputValue} onChange={handleChange} />
      {error && <span style={{ color: 'red' }}>{error}</span>}
    </form>
  );
};

export default MyForm;

That looks great! How can I handle form submission with validation?

You can handle form submission by checking for errors before proceeding. Here's an updated example:

const handleSubmit = (e) => {
  e.preventDefault();
  if (!error) {
    // Proceed with form submission
    console.log('Form submitted:', inputValue);
  }
};

return (
  <form onSubmit={handleSubmit}>
    <input type="text" value={inputValue} onChange={handleChange} />
    {error && <span style={{ color: 'red' }}>{error}</span>}
    <button type="submit">Submit</button>
  </form>
);