Continuing from our last post, this is now our component code:

import React from 'react';

import { NavLink } from 'react-router-dom';

import "./YearsUpdates.scss";

class YearsUpdates extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        }

    }

    getLink(type) {
        switch (type) {
            case 'website':
                return Websites
            default:
                return 'error'
        }

    };

    render() {
        console.log(this.props.updates);
        var tableRows = this.props.data.updates.map((update, i) =>{this.props.data.year}Added {update.name} to {this.getLink(update.type)}


        );

        return (
           {tableRows}
        )
    }
}

export default YearsUpdates;

We can access the JSON using this.props.data. We can then loop through the updates using “map” and add a new table row for each update and store it all up in the variable tableRows. We also use a function getLink() that renders different things depending on the update’s type.