CODEWITHSUNDEEP
javascriptreactjsreact-reduxrenderpartial
Mel
Mel

Reputation: 2685

How do you make a partial in react

I'm trying to figure out how to make and use a partial in react. I've figured out how to make a new page, but now I'm trying to put my footer in a partial and add it to my page layout.

I have a page layout - I'm trying to add the footer here:

import React from 'react'
import { NavLink } from 'react-router-dom'
import PropTypes from 'prop-types'
import Logo from '../assets/logo.png'
import '../styles/PageLayout.scss'
var Footer = require('Footer');


export const PageLayout = ({ children }) => (
  <div className='container text-center'>
    <NavLink to='/' activeClassName='page-layout__nav-item--active'><img className='icon' src={Logo} /></NavLink>

    <div className='page-layout__viewport'>
      {children}
      <Footer />
    </div>

    </div>


  </div>


)
PageLayout.propTypes = {
  children: PropTypes.node,
}

export default PageLayout

Then I have a components/Footer.js which has:

import React from 'react';
import ReactDOM from 'react-dom';
// import { Button } from 'react-bootstrap';
import * as ReactBootstrap from 'react-bootstrap'

class Footer extends React.Component {

  render: function () {
      return (
        testing
      );
    }
  }

  module.exports = Footer;

}

This gives an error that says:

ERROR in ./src/components/PageLayout.js
Module not found: Error: Can't resolve 'Footer' in '/Users/me/code/learn-react-redux/src/components'
 @ ./src/components/PageLayout.js 26:13-30
 @ ./src/routes/index.js
 @ ./src/main.js
 @ multi ./src/main webpack-hot-middleware/client.js?path=/__webpack_hmr

Does anyone know how to incorporate a partial into a page layout. There isn't anything dynamic to put in there - I'm just trying (and failing miserably) to extract a partial and keep my file tidy.

Upvotes: 2

Views: 7584

Answers (1)

David L. Walsh
David L. Walsh

Reputation: 24816

I can see two three errors in your Footer.

  1. Your render() function must return an element, not bare text. i.e. <span>testing</span> NOT testing.

  2. Your export statement sits inside your class definition. Place it outside.

  3. UPDATE Your render function signature should read render() {

Finally, your require statement also looks wrong. Try require('./Footer').

Upvotes: 2

Related Questions