Reusable Alert Component
ReactJS
Easy
6 views
Problem Description
Create an Alert component that supports success and error styles.
Output Format
Render a React component.
Constraints
Pick colors based on type.
Official Solution
import React from 'react';
function Alert({ type = 'success', children }) {
const styles = type === 'error'
? { border: '1px solid #ffc2c7', background: '#ffe8ea', color: '#7f0f18' }
: { border: '1px solid #b7f0d0', background: '#eafaf1', color: '#0b5' };
return <div style={{ borderRadius: 14, padding: 12, ...styles }}>{children}</div>;
}
export default function App() {
return (
<div style={{ padding: 16, display: 'grid', gap: 10 }}>
<Alert>Welcome to meetcode.</Alert>
<Alert type='error'>Something went wrong.</Alert>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!