Render a comma separated array with React and TypeScript

Learn how to render a comma separated array of JSX elements with React and TypeScript.

Create a new React project:

npx create-react-app comma-separated-array --template typescript

Replace src/App.tsx with the following:

import * as React from 'react';
import './App.css';

interface Person {
    firstName: string;
    lastName: string;
}

const PersonName: React.FC<Person> = ({firstName, lastName}) => {
    return <span>{firstName} {lastName}</span>
}

function App() {
    const persons = [
        {firstName: 'John', lastName: 'Snow'},
        {firstName: 'Daenerys', lastName: 'Targaryen'},
        {firstName: 'Hodor ', lastName: 'Hodor '},
    ]

    return (
        <div className="App">
            GoT characters:
            {persons
                .map(p => <PersonName firstName={p.firstName} lastName={p.lastName}/>)
                .reduce<JSX.Element | null>((prev, cur) => prev === null ? cur : <>{prev}, {cur}</>, null)
            }
        </div>
    );
}

export default App;

Start it and open http://localhost:3000/ to see your list of objects rendered, separated with commas.

Render a comma separated array with React and TypeScript

Further reading