Source: components/admin/ContactsList.js

import React, { Component } from 'react'
import ContactDetail from './ContactDetail'
import { Link } from 'react-router-dom'

/**
 * Component shows a list of all available contacts in the web portal and makes it possible to get to the form to edit them
 */
class ContactsList extends Component {

    constructor(props) {
        super(props);
        this.state = { activeContact: 0, activeContactDetails: {}}
    }

    clickContact(contact) {
        this.setState({activeContact: contact})
    }

    unClickContact() {
        this.setState({activeContact: 0})
    }

    render() {

        return(

            <div>
                <Link to="/experts/superuser/contact"><button className="btn btn-green">Add local contact</button></Link>
                <table cellSpacing="0" className="superuser-table">
                    <thead>
                        <tr>
                            <td>ID</td>
                            <td>Language</td>
                            <td>Pilotarea</td>
                        </tr>
                    </thead>

                    {this.props.contacts.map((contact, index) =>
                    <tbody key={contact.id}>
                        <tr className={(index % 2 === 0 ? 'even' : 'odd')}>
                            <td>{contact.id}</td>
                            <td><Link to={"/experts/superuser/contact/"+contact.id}>{contact.language}</Link></td>
                            <td>{contact.pilotarea}</td>
                        </tr>
                        {contact.id === this.state.activeContact &&
                        <tr>
                            <td colSpan="6">
                            <ContactDetail contact={contact} />
                            </td>
                        </tr>
                        }
                        </tbody>
                    )}
                </table>
            </div>
        )
    }
}

export default ContactsList