Keyed Fragment List

Keyed Fragment List

Hard ReactJS Component Design 20 views
Explanation Complexity

Problem Statement

Render a list where each item outputs two lines using a keyed Fragment.

Input Format

No input.

Output Format

Render a React component.

Constraints

Use React.Fragment with a key.

Input / Output Format

Input Format
No input.
Output Format
Render a React component.
Constraints
Use React.Fragment with a key.

Examples

Input:
Output:
(React code)

Example Solution (Public)

ReactJS 
import React from 'react';

const lessons = [
  { id: 'l1', title: 'React basics', note: 'Components and props' },
  { id: 'l2', title: 'Hooks', note: 'State and effects' },
  { id: 'l3', title: 'Forms', note: 'Controlled inputs' }
];

export default function App() {
  return (
    <div style={{ padding: 16 }}>
      {lessons.map((l) => (
        <React.Fragment key={l.id}>
          <strong>{l.title}</strong>
          <div style={{ color: '#555', marginBottom: 10 }}>{l.note} on meetcode</div>
        </React.Fragment>
      ))}
    </div>
  );
}

Official Solution Code

import React from 'react';

const lessons = [
  { id: 'l1', title: 'React basics', note: 'Components and props' },
  { id: 'l2', title: 'Hooks', note: 'State and effects' },
  { id: 'l3', title: 'Forms', note: 'Controlled inputs' }
];

export default function App() {
  return (
    <div style={{ padding: 16 }}>
      {lessons.map((l) => (
        <React.Fragment key={l.id}>
          <strong>{l.title}</strong>
          <div style={{ color: '#555', marginBottom: 10 }}>{l.note} on meetcode</div>
        </React.Fragment>
      ))}
    </div>
  );
}
Please login to submit solutions.
Editor
Output

                                        

                                    

                                    

                                        

                                                                                    
Please login to submit solutions.