How do I display error messages in React?

How do I display error messages in React?

You can display error messages in React by using state to manage the error message and conditionally rendering it in your component.

Can you show me a code example?

Sure! Here's a simple example:

import React, { useState } from 'react';

function MyComponent() {
  const [error, setError] = useState('');

  const handleSubmit = () => {
    // Simulate an error
    setError('An error occurred!');
  };

  return (
    <div>
      <button onClick={handleSubmit}>Submit</button>
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
}

This will display the error message in red when the button is clicked.

What if I want to clear the error message?

You can clear the error message by setting the error state back to an empty string. For example, you can add a button to clear the error.