React for Designers and PMs
List of contacts
A simple React component that displays a list of contacts.
LLM Written
Human Written
Output
Alice
123-456-7890
Bob
987-654-3210
Charlie
555-555-5555
David
111-222-3333
Eve
444-444-4444
Frank
666-666-6666
File Structure
├── src
` `├── App.tsx `← we are here`
` `├── index.css
` `└── main.tsxDistraction free code
const [contacts, setContacts] = [
{ id: 1, name: 'Alice', number: '123-456-7890' },
{ id: 2, name: 'Bob', number: '987-654-3210' },
...
];
<div>
{contacts.map((contact) => (
<div key={contact.id}>
<p>{contact.name}</p>
<p>{contact.number}</p>
</div>
))}
</div>;Code
'use client';
import { useState } from 'react';
import { User } from 'lucide-react';
export default function Home() {
const [contacts, setContacts] = useState([
{ id: 1, name: 'Alice', number: '123-456-7890' },
{ id: 2, name: 'Bob', number: '987-654-3210' },
{ id: 3, name: 'Charlie', number: '555-555-5555' },
{ id: 4, name: 'David', number: '111-222-3333' },
{ id: 5, name: 'Eve', number: '444-444-4444' },
{ id: 6, name: 'Frank', number: '666-666-6666' },
]);
return (
<>
{contacts.map((contact) => (
<div key={contact.id} className='flex items-center gap-4 bg-white border border-gray-100 px-4'>
<User size={24} className='text-blue-500' />
<p className='py-6'>{contact.name}</p>
<p className='text-gray-500'>{contact.number}</p>
</div>
))}
</>
);
}Layer visualisation
Layers
Approximation of how this code would look in Figma's layer panel.
Home
Imports
contacts"[{ id: 1, name: "Alice", ... }, ...]"
contactsData"[{ id: 1, name: 'Alice', number: '123-456-7890' }, ...]"
RootFragment
ContactRow
UserIcon
ContactName"{contact.name}"
ContactNumber"{contact.number}"
Select a layer to inspect