Component With Optional Footer
ReactJS
Medium
7 views
Problem Description
Create a Card component that renders an optional footer when prop is provided.
Output Format
Render a React component.
Constraints
Render footer only if footer prop exists.
Official Solution
import React from 'react';
function Card({ title, footer, children }) {
return (
<section style={{ border: '1px solid #eee', borderRadius: 14, overflow: 'hidden', width: 420 }}>
<div style={{ padding: 14 }}>
<h2 style={{ margin: '0 0 8px 0' }}>{title}</h2>
{children}
</div>
{footer ? <div style={{ padding: 12, borderTop: '1px solid #eee', background: '#f6f8fa' }}>{footer}</div> : null}
</section>
);
}
export default function App() {
return (
<div style={{ padding: 16 }}>
<Card title='meetcode' footer={<a href='#'>View progress</a>}>
<p style={{ margin: 0 }}>Daily practice helps.</p>
</Card>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!