Horrible Howtos: Using .map to make a nav list!

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 {
                	return <a title={results.title} href={results.href} active={results.active}>{results.name}</a>

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.

Show Comments

Get the latest posts delivered right to your inbox.