Creating locaLinks component solution

In notebook:
Building Modern Web Apps
Created at:
2016-01-22
Updated:
2016-06-12
Tags:
React libraries JavaScript
Creates a nav-helper component in the components directory

Usual React setup (import React, export default createClass, then render method):
  // **** nav-helper.js ****
import React from 'react'
import localLinks from 'local-links'

export default React.createClass({
    // this is for the React devtool, see previous note
    displayName: 'NavHelper',
    
    //  copy form previous note
    onClick (event) {
        const pathname = localLinks.getLocalPathname(event)
        if(pathname){
            event.preventDefault()
            app.router.history.navigate(pathname)
        }
    }
    
    render () {
        return (
            <div onClick={this.onClick}>
                {this.props.children}
            </div>
        )
    }
})
If you want to set additional properties to the "click handler" div, like a CSS classname:
Using the ES6 spread operator to add these additional properties to the div element:
​<div {...this.props} onClick={this.onClick}>​ 
  render () {
    return (
        <div {...this.props} onClick={this.onClick}>
            {this.props.children}
        </div>
    )
}

Demos how it works.
In his main layout.js file, he imports this component as NavHelper and wraps everything with NavHelper:
  // **** layout.js ****
import React from 'react'
// ++++ 1. import navhelper
import NavHelper from '../components/nav-helper'

export default React.createClass({
    // ++++ 2. sets displayName for dev tools
    displayName: 'Layout',
    // ---- 3. delete old onClick handler
//    onClick (event) {
//        deleted
//    }
    
    render () {
        return (
            // ++++ 4. wrap the JSX with NavHelper
            // note the className
            <NavHelper className="something">
                <nav className="top-nap">
                    ...
                    {this.props.children}
                </nav>
            </NavHelper>
            )
    }
})
Yes, this will add an extra div, for handling the clicks... (for now)
the ES6 ​{...this.props}​ will add ​className="something"​ to the navhelper component div element (see above)

Also wraps the component in public.js with navhelper. Removes the div in public.js and passes its className property to the navhelper.

He only had to add navhelper to public and repos layouts no other child elements, since the clicks will bubble up.

Remark about passing an ​.onClick​ handler in ​this.props​ 

It will cancel out the ​this.onClick​ on the element (see above in navhelper)