< Back to Coding

Using JSON data to populate a component

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) {
        this.state = {



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


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


        return (
) } } 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.

Leave a Reply

Your email address will not be published. Required fields are marked *