How do i set axios error message-box background color-red in react js?

Question

function NetworkError(props) {
return (
<div style={{ backgroundColor: 'red', padding: '1rem' }}>
<h2>Network Error</h2>
<p>{props.message}</p>
</div>
);
}

Answer 1

Wrap your Axios request in a try-catch block to handle errors:

try {
const response = await axios.get('your-api-endpoint');
// handle successful response
}
catch (error) {
return <NetworkError message={error.message} />;
}
function NetworkError(props) {
const { message } = props;

return (
<div style={{ backgroundColor: message.includes('Network Error') ? 'red' : 'white', padding: '1rem' }}>
<h2>Network Error</h2>
<p>{message}</p>
</div>
);
}

Answer 2

Where is your attempt?