< 1 min read

I like to make shit repeat

This is why I'm going to be learning how to use .map to create a simple nav component in es6 for React. I found out pretty quickly rendering a dumb component for your nav is a pretty bad idea. For brevity of future usage I'm going to write a simple component.

import React, { Component } from 'react';

const navList = [
	{ 'active': true, 'title': 'home', 'href': '#', 'name': 'Home' },
    { 'active': false, 'title': 'about', 'href': '#', 'name': 'About' },
    { 'active': false, 'title': 'other', 'href': '#', 'name': 'Other' },
]

export default class Nav extends Component {
	render(){
    	return(
        	<nav>
            	{
                navList.map(function(results)
                	return <a title={results.title} href={results.href} active={results.active}>{results.name}</a>
                )
                }
            </nav>
        );
    }
}

This should return a simple tidy nav list. Obviously you will not want to use this as is and add your own embellishments, but for a base example this will want to be your usage.

Sam Clark

Sam Clark

Read more posts by this author.