person-list.js

import React from 'react';
import Person from './person';

export default class PersonList extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            people: [
                {
                    id: 0,
                    name: 'Adam Smith',
                    number: '01234 567890'
                },
                {
                    id: 1,
                    name: 'Chris Klanac',
                    number: '01234 567896'
                },
                {
                    id: 2,
                    name: 'Rich Greenhill',
                    number: '01234 567875'
                }
            ]
        };
    }

    render() {
        const people = this.state.people.map(person => (
            <Person key={person.id} name={person.name} number={person.number} />
        ));

        return <div className="person-list">{people}</div>;
    }
}

person.js

import React from 'react';

export default function Person(props) {
    return (
        <div className="person">
            <div className="person-name">{props.name}</div>
            <div className="person-number">{props.number}</div>
        </div>
    );
}