Split Big Component
ReactJS
Medium
5 views
Problem Description
Refactor by splitting a ProfileCard into Avatar and Details components.
Output Format
Render a React component.
Constraints
Use small components and props.
Official Solution
import React from 'react';
function Avatar({ initials }) {
return (
<div style={{ width: 56, height: 56, borderRadius: '50%', background: '#0b5', color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 700 }}>
{initials}
</div>
);
}
function Details({ name, subtitle }) {
return (
<div>
<strong>{name}</strong>
<div style={{ color: '#555' }}>{subtitle}</div>
</div>
);
}
function ProfileCard({ name }) {
const initials = name.split(' ').filter(Boolean).map((p) => p[0].toUpperCase()).slice(0, 2).join('');
return (
<div style={{ display: 'flex', gap: 12, alignItems: 'center', border: '1px solid #eee', borderRadius: 14, padding: 14, width: 420 }}>
<Avatar initials={initials} />
<Details name={name} subtitle='Learning React on meetcode' />
</div>
);
}
export default function App() {
return <ProfileCard name='Meetcode Learner' />;
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!