How to create a reusable component or partial in react.js?

Question

First time working with React.js and I wanted to do something pretty simple.

I created an app.js that loads up the initial page that has my navigation and spits out the children props.

Instead of putting the navigation in the app.js file, I would like to create another component or partial to render it.

Code below:

import React, { Component } from 'react';
import NavLink from './components/NavLinks/NavLinks'
import './App.css';
import { Link } from 'react-router';

class App extends Component {
  render() {
    return (
      <div className="App">
        <nav>
          <li><NavLink to="/">Home</NavLink></li>
          <li><NavLink to="/contact" activeClassName="active">Contact</NavLink></li>
          <li><NavLink to="/bad-link" activeClassName="active">Bad Link</NavLink></li>
        </nav>

        <div className='container'>
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default App;

What I would like:

class App extends Component {
  render() {
    return (
      <div className="App">

        {-- Some component or partial here to render the nav --}

        <div className='container'>
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default App;

Answer 1

The ideal way to do this would be by making a stateless functional component. Since you are not making changes based on the state for the navigation component, you can make it as a light weight Stateless functional component that just renders the required view for you.

const navRenderer = () => {
     <nav>
         <li><NavLink to="/">Home</NavLink></li>
         <li><NavLink to="/contact" activeClassName="active">Contact</NavLink</li>         
         <li><NavLink to="/bad-link" activeClassName="active">Bad Link</NavLink</li>
     </nav>
    }

export default navRenderer;

Now you can import this in you App.js file:

import navRenderer from 'path/to/navRenderer';

    class App extends Component {
      render() {
        return (
          <div className="App">
            <NavRenderer />
            <div className='container'>
              {this.props.children}
            </div>
          </div>
        );
      }
    }

export default App;

You can read more about Stateless Functional Components here.

Answer 2

Write it like this:

First create a separate component that contains only Navigation part of the application like this:

class Nav extends Component {
  render() {
    return (
       <div>
          <nav>
             <li><NavLink to="/">Home</NavLink></li>
             <li><NavLink to="/contact" activeClassName="active">Contact</NavLink></li>
             <li><NavLink to="/bad-link" activeClassName="active">Bad Link</NavLink></li>
          </nav>
       </div>
    );
  }
}

export default Nav;

Then import this navigation file in your App component and render it directly inside render like this:

import Nav from './nav'; // import here change the path according to your folder structure 

class App extends Component {
  render() {
    return (
      <div className="App">

        <Nav/>

        <div className='container'>
          {this.props.children}
        </div>

      </div>
    );
  }
}

export default App;

Answer 3

You can create another component as NavLinks and since it doesn't have any state you can create it as a stateless component and import in App like

const NavLinks= () => {
         <nav>
             <li><NavLink to="/">Home</NavLink></li>
             <li><NavLink to="/contact" activeClassName="active">Contact</NavLink</li>         
             <li><NavLink to="/bad-link" activeClassName="active">Bad Link</NavLink</li>
         </nav>
        }

export default NavLinks;

App.js

import NavLinks form 'path/to/NavLinks';
class App extends Component {
  render() {
    return (
      <div className="App">

        <NavLinks/>

        <div className='container'>
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default App;