Source: components/contributepage/ContentContributed.js

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

/**
 * Component that lists the content that was submitted by the logged in user
 */
class ContentContributed extends Component {

  render() {
      
      let content = this.props.content.filter(item => item.user_id === this.props.user.id);
    return(
      <div className="contribute-section">
        <h4><i className="fa fa-book" aria-hidden="true"></i> {getTranslation("contentview.title")}: <Link to="/experts/contribute/content"><button className="btn btn-icon btn-green btn-new">{getTranslation("contentview.add_content_button")}</button></Link></h4>
        {content.length === 0 &&
          <p>{getTranslation("contentview.no_content_added")}</p>
        }
        {content.length !== 0 &&
        <div className="default-element-gray-content">
          <table cellSpacing="0">
            <thead>
              <tr>
                <th className="table-50">{getTranslation("contentview.table.title")}</th>
                <th className="table-25">{getTranslation("contentview.table.author")}</th>
                <th className="table-25">{getTranslation("contentview.table.year")}</th>
              </tr>
            </thead>
            <tbody>
          {content.length > 0 &&
            content.map((item, index) =>
              <tr className={(index % 2 === 0 ? 'white' : 'table-gray')} key={item.id}>
                <td><Link to={"/experts/contribute/content/"+item.id}>{item.title}</Link></td>
                <td>{item.author}</td>
                <td>{item.year}</td>
              </tr>
            )
          }
          </tbody>
          </table>
        </div>
      }
      </div>
    )
  }
}

export default ContentContributed