How can I handle errors in a React OTP input component?

How can I handle errors in a React OTP input component?

You can handle errors in a React OTP input by using state to track the input value and validation errors.

What kind of validation should I implement?

You should check for length, numeric values, and whether the input matches the expected OTP format.

How can I display error messages to the user?

You can conditionally render error messages based on the validation state, using a simple if statement.

Can you show me a code example?

Sure! Here's a basic example:

const [otp, setOtp] = useState('');
const [error, setError] = useState('');

const handleChange = (e) => {
  const value = e.target.value;
  if (value.length !== 6 || isNaN(value)) {
    setError('OTP must be 6 digits.');
  } else {
    setError('');
  }
  setOtp(value);
};

return (
  <div>
    <input type="text" value={otp} onChange={handleChange} />
    {error && <span>{error}</span>}
  </div>
);

This will validate the OTP input and display an error message if necessary.