How do I use try-catch in React?

How do I use try-catch in React?

You can use try-catch in React to handle errors in your code. Wrap your code in a try block and catch any errors in the catch block.

Can you give me an example of using try-catch in a React component?

Sure! Here's a simple example:

function MyComponent() {
  const handleClick = () => {
    try {
      // Some code that might throw an error
      throw new Error('Oops!');
    } catch (error) {
      console.error('Error caught:', error);
    }
  };

  return <button onClick={handleClick}>Click me</button>;
}

What should I do if I want to display an error message to the user?

You can set an error state in your component and display it conditionally. For example:

const [error, setError] = useState(null);

const handleClick = () => {
  try {
    // Some code that might throw an error
    throw new Error('Oops!');
  } catch (error) {
    setError(error.message);
  }
};

return (
  <div>
    <button onClick={handleClick}>Click me</button>
    {error && <p>Error: {error}</p>}
  </div>
);
};