List Rendering With Stable Keys

List Rendering With Stable Keys

Medium ReactJS Component Design 22 views
Explanation Complexity

Problem Statement

Render a topic list and use stable keys instead of index.

Input Format

No input.

Output Format

Render a React component.

Constraints

Use key from data like id or slug.

Input / Output Format

Input Format
No input.
Output Format
Render a React component.
Constraints
Use key from data like id or slug.

Examples

Input:
Output:
(React code)

Example Solution (Public)

ReactJS 
import React from 'react';

const topics = [
  { id: 'html', name: 'HTML' },
  { id: 'css', name: 'CSS' },
  { id: 'react', name: 'React' }
];

export default function App() {
  return (
    <ul style={{ padding: 16 }}>
      {topics.map((t) => (
        <li key={t.id}>{t.name} on meetcode</li>
      ))}
    </ul>
  );
}

Official Solution Code

import React from 'react';

const topics = [
  { id: 'html', name: 'HTML' },
  { id: 'css', name: 'CSS' },
  { id: 'react', name: 'React' }
];

export default function App() {
  return (
    <ul style={{ padding: 16 }}>
      {topics.map((t) => (
        <li key={t.id}>{t.name} on meetcode</li>
      ))}
    </ul>
  );
}
Please login to submit solutions.
Editor
Output

                                        

                                    

                                    

                                        

                                                                                    
Please login to submit solutions.