Source: ContentList.js

import React, { Component } from 'react'
import ContentDetail from './ContentDetail'
import PropTypes from 'prop-types';

/**
* This component displays a list of all content and gives the superuser
* the possibility to remove content from the website (landingpage)
*/
class ContentList extends Component {

    constructor(props) {
        super(props);
        this.state = {
          /** The content that is active (active content can be deleted)
             Content gets active when the user clicks on a listed item */
          activeContent: 0
        }
    }

    /**
    * Set the active content to the one that is clicked
    *@param {integer} content - the id of the content
    */
    clickContent(content) {
        this.setState({activeContent: content})
    }

    /**
    * Set the active content to 0 to not have any content marked as active
    * This function also gets called from the child component <ContentDetail>
    */
    unClickContent() {
        this.setState({activeContent: 0})
    }

    render() {
        return(
            <div>
                <table cellSpacing="0" className="superuser-table">
                    <thead>
                        <tr>
                            <td>ID</td>
                            <td>Title</td>
                            <td>User ID</td>
                        </tr>
                    </thead>

                    {this.props.contents.map((content, index) =>
                    <tbody key={content.id}>
                        <tr className={(index % 2 === 0 ? 'even' : 'odd')} onClick={() => this.clickContent(content.id)}>
                            <td>{content.id}</td>
                            <td>{content.title}</td>
                            <td>{content.user_id}</td>
                        </tr>
                        {content.id === this.state.activeContent &&
                        <tr>
                            <td colSpan="6">
                            <ContentDetail content={content} removeContentSuperuser={this.props.removeContentSuperuser} unclickContent={() => this.unClickContent()} />
                            </td>
                        </tr>
                        }
                        </tbody>
                    )}
                </table>
            </div>
        )
    }
}

export default ContentList