Skip to content

Instantly share code, notes, and snippets.

@tech-andgar

tech-andgar/rendering-lists.1.1.tsx

Last active October 21, 2025 20:45
Show Gist options
  • Save tech-andgar/6086929f96a4a182adb2b4a4f562b32c to your computer and use it in GitHub Desktop.
Save tech-andgar/6086929f96a4a182adb2b4a4f562b32c to your computer and use it in GitHub Desktop.
Download ZIP
React Challange
Raw
rendering-lists.1.1.tsx
import React from 'react';
type Person = {
readonly id: number,
readonly name: string,
readonly profession: Profession,
readonly accomplishment: string,
readonly imageId: string
}
type People = Person[]
type Profession =
| 'mathematician'
| 'chemist'
| 'physicist'
| 'astrophysicist'
type GroupedProfession<U extends Profession> = {
[Key in U as `${Key}s`]: Person[];
} & { everyone: Person[]; }
const people: People = [{
id: 0,
name: 'Creola Katherine Johnson',
profession: 'mathematician',
accomplishment: 'spaceflight calculations',
imageId: 'MK3eW3A',
}, {
id: 1,
name: 'Mario José Molina-Pasquel Henríquez',
profession: 'chemist',
accomplishment: 'discovery of Arctic ozone hole',
imageId: 'mynHUSa',
}, {
id: 2,
name: 'Mohammad Abdus Salam',
profession: 'physicist',
accomplishment: 'electromagnetism theory',
imageId: 'bE7W1ji',
}, {
id: 3,
name: 'Percy Lavon Julian',
profession: 'chemist',
accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
imageId: 'IOjWm71',
}, {
id: 4,
name: 'Subrahmanyan Chandrasekhar',
profession: 'astrophysicist',
accomplishment: 'white dwarf star mass calculations',
imageId: 'lrWQx8l',
}];
export function getImageUrl(person: Person) {
return (
'https://i.imgur.com/' +
person.imageId +
's.jpg'
);
}
type ListPeopleProps = {
title: string;
people: People;
}
const ListPeople: React.FC<ListPeopleProps> = ({title, people}) => {
const listItems = people.map(person =>
<li key={person.id}>
<img
src={getImageUrl(person)}
alt={person.name}
/>
<p>
<b>{person.name}:</b>
{' ' + person.profession + ' '}
known for {person.accomplishment}
</p>
</li>,
);
return (
<article>
<h1>{title}</h1>
<ul>{listItems}</ul>
</article>
);
};
export default function List() {
const {everyone, chemists } = people.reduce((acc, p) => {
if(p.profession === 'chemist') acc.chemists.push(p);
else acc.everyone.push(p);
return acc;
}, {chemists:[], everyone:[]} as unknown as GroupedProfession<'chemist'>);
return (
<React.Fragment>
<ListPeople title='Scientists' people={everyone} />
<ListPeople title='Chemists' people={chemists} />
</React.Fragment>
);
}
Raw
rendering-lists.1.2.tsx
import React from 'react';
type Person = {
readonly id: number,
readonly name: string,
readonly profession: Profession,
readonly accomplishment: string,
readonly imageId: string
}
type People = Person[]
type Profession =
| 'mathematician'
| 'chemist'
| 'physicist'
| 'astrophysicist'
type GroupedProfession<U extends Profession> = {
[Key in U as `${Key}s`]: Person[];
} & { everyone: Person[]; }
const people: People = [{
id: 0,
name: 'Creola Katherine Johnson',
profession: 'mathematician',
accomplishment: 'spaceflight calculations',
imageId: 'MK3eW3A',
}, {
id: 1,
name: 'Mario José Molina-Pasquel Henríquez',
profession: 'chemist',
accomplishment: 'discovery of Arctic ozone hole',
imageId: 'mynHUSa',
}, {
id: 2,
name: 'Mohammad Abdus Salam',
profession: 'physicist',
accomplishment: 'electromagnetism theory',
imageId: 'bE7W1ji',
}, {
id: 3,
name: 'Percy Lavon Julian',
profession: 'chemist',
accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
imageId: 'IOjWm71',
}, {
id: 4,
name: 'Subrahmanyan Chandrasekhar',
profession: 'astrophysicist',
accomplishment: 'white dwarf star mass calculations',
imageId: 'lrWQx8l',
}];
export function getImageUrl(person: Person) {
return (
'https://i.imgur.com/' +
person.imageId +
's.jpg'
);
}
type ListPeopleProps = {
title: string;
people: People;
}
const ListPeople: React.FC<ListPeopleProps> = ({title, people}) => {
const listItems = people.map(person =>
<li key={person.id}>
<img
src={getImageUrl(person)}
alt={person.name}
/>
<p>
<b>{person.name}:</b>
{' ' + person.profession + ' '}
known for {person.accomplishment}
</p>
</li>,
);
return (
<article>
<h1>{title}</h1>
<ul>{listItems}</ul>
</article>
);
};
type Entries<T> = { [K in keyof T]: [K, T[K]] }[keyof T];
const firstPerson = people[0];
const res = Object.entries(firstPerson) as Entries<Person>[];
for (const [key, value] of res) {
if (key === 'profession') {
console.log(key, value);
}
}
export default function List() {
const groups = Object.groupBy<keyof GroupedProfession<'chemist'>, Person>(people, p =>
p.profession === 'chemist' ? 'chemists' : 'everyone',
);
const chemists = groups.chemists ?? [];
const everyone = groups.everyone ?? [];
return (
<React.Fragment>
<ListPeople title='Scientists' people={everyone} />
<ListPeople title='Chemists' people={chemists} />
</React.Fragment>
);
}
Raw
rendering-lists.1.jsx
const people = [{
id: 0,
name: 'Creola Katherine Johnson',
profession: 'mathematician',
accomplishment: 'spaceflight calculations',
imageId: 'MK3eW3A'
}, {
id: 1,
name: 'Mario José Molina-Pasquel Henríquez',
profession: 'chemist',
accomplishment: 'discovery of Arctic ozone hole',
imageId: 'mynHUSa'
}, {
id: 2,
name: 'Mohammad Abdus Salam',
profession: 'physicist',
accomplishment: 'electromagnetism theory',
imageId: 'bE7W1ji'
}, {
id: 3,
name: 'Percy Lavon Julian',
profession: 'chemist',
accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
imageId: 'IOjWm71'
}, {
id: 4,
name: 'Subrahmanyan Chandrasekhar',
profession: 'astrophysicist',
accomplishment: 'white dwarf star mass calculations',
imageId: 'lrWQx8l'
}];
import { people } from './data.js';
import { getImageUrl } from './utils.js';
function ListPeople({title, people}){
const listItems = people.map(person =>
<li key={person.id}>
<img
src={getImageUrl(person)}
alt={person.name}
/>
<p>
<b>{person.name}:</b>
{' ' + person.profession + ' '}
known for {person.accomplishment}
</p>
</li>
);
return (
<article>
<h1>{title}</h1>
<ul>{listItems}</ul>
</article>
);
}
export default function List() {
const {chemists, everyone} = people.reduce((obj, p) => {
if(p.profession === 'chemist') obj.chemists.push(p)
else obj.everyone.push(p)
return obj
}, {chemists:[], everyone:[]})
// const = people.filter(p => p.profession !== 'chemist')
return (
<fragment>
<ListPeople title='Scientists' people={everyone} />
<ListPeople title='Chemists' people={chemists} />
</fragment>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment