React for Designers and PMs
Favourite contacts
A simple React component that displays a list of contacts with their favourite status.
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', isFav: true },
{ id: 2, name: 'Bob', number: '987-654-3210', isFav: false },
...
];
<div>
{contacts.map((contact) => (
<div key={contact.id}>
<p>{contact.name}</p>
<p>{contact.number}</p>
{contact.isFav && <Star />}
</div>
))}
</div>;Code
'use client';
import { useState } from 'react';
import { User, Star } from 'lucide-react';
export default function Home() {
const [contacts, setContacts] = useState([
{ id: 1, name: 'Alice', number: '123-456-7890', isFav: true },
{ id: 2, name: 'Bob', number: '987-654-3210', isFav: false },
{ id: 3, name: 'Charlie', number: '555-555-5555', isFav: false },
{ id: 4, name: 'David', number: '111-222-3333', isFav: true },
{ id: 5, name: 'Eve', number: '444-444-4444', isFav: false },
{ id: 6, name: 'Frank', number: '666-666-6666', isFav: false },
]);
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>
{contact.isFav && <Star size={20} className='fill-orange-300 stroke-orange-400' />}
</div>
))}
</>
);
}Layer visualisation
Layers
Approximation of how this code would look in Figma's layer panel.
Home
ReactImport
IconImport
contacts"[{ id, name, number, isFav }, ...]"
contactsData"[{ id: 1, name: 'Alice', isFav: true }, ...]"
ContactListFragment
ContactRow
UserIcon
ContactName"{contact.name}"
ContactNumber"{contact.number}"
showStarIfFavourite
FavouriteStarIcon
Select a layer to inspect