Table Row Component
ReactJS
Medium
6 views
Problem Description
Create a small table component that renders rows from data.
Output Format
Render a React component.
Constraints
Use proper table tags and map rows.
Official Solution
import React from 'react';
const rows = [
{ topic: 'HTML', level: 'Easy' },
{ topic: 'CSS', level: 'Medium' },
{ topic: 'React', level: 'Hard' }
];
export default function App() {
return (
<div style={{ padding: 16 }}>
<table style={{ borderCollapse: 'collapse', width: 420 }}>
<thead>
<tr>
<th style={{ border: '1px solid #ddd', padding: 8, textAlign: 'left' }}>Topic</th>
<th style={{ border: '1px solid #ddd', padding: 8, textAlign: 'left' }}>Level</th>
</tr>
</thead>
<tbody>
{rows.map((r) => (
<tr key={r.topic}>
<td style={{ border: '1px solid #ddd', padding: 8 }}>{r.topic}</td>
<td style={{ border: '1px solid #ddd', padding: 8 }}>{r.level}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!