Where is added container in React app?

Question

I forked this React app :https://github.com/react-boilerplate/react-boilerplate

At the moment I am trying to display a simple container called 'Schedule' to the app, the container was generated through the app:

export class Schedule extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    return (
      <div>
        <Helmet>
          <title>Schedule</title>hoera
          <meta name="description" content="Description of Schedule" />
        </Helmet>
      </div>
    );
  }
}

Now I am trying to use this container inside another container:

import Schedule from 'containers/Schedule';

    <AppWrapper>
                  <Schedule></Schedule>
                  <Helmet
                    titleTemplate="%s - React.js Boilerplate"
                    defaultTitle="React.js Boilerplate"
                  >
                    <meta name="description" content="A React.js Boilerplate application" />
                  </Helmet>
                  <Header />
                  <Switch>
                    <Route exact path="/" component={HomePage} />
                    <Route path="/features" component={FeaturePage} />
                    <Route path="" component={NotFoundPage} />
                    <Route path="/schedule" component={Schedule} />

                  </Switch>
                  <Footer />
    <AppWrapper/>

The issue is that Schedule is not displaying. How can I display this container? complete source:react-boilerplate

I think your component actually is not displaying. Is it replaced by other component in other files? — ryy77, Jun 13 '18 at 10:16

devserkan · Answer 1 · 2018-06-13T05:27:05.433

0

Aren't you getting an error for this? Your Schedule component is a named export not default. So you need to import it as:

import { Schedule } from "containers/Schedule";

or don't give a name to it, just export as default:

export default class extends React.Component {
    ....
}

Also you don't need to use your component like this: <Schedule></Schedule> You are not passing a child to it, just use it with a closing tag: <Schedule />

If this answer does not solve your problem we may need some more information.

edited Jun 13 '18 at 05:27

answered Jun 13 '18 at 05:19

devserkan

16,870
4
31
47

For this kind of situations, instead of full source code you can show the related component as a whole. So, there is a default export for Schedule there, this means my answer is not the solution. @Andrei Ghervan might be right. Try putting something above Helmet in your Schedule component and check if you can see it. – devserkan Jun 13 '18 at 21:22

score 0 · Answer 2 · answered Jul 31 '18 at 18:24

Your component is not displaying because you put nothing in it... Helmet is just changing the page head (title etc.).

Try to add this:

export class Schedule extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    return (
      <div>
        <Helmet>
          <title>Schedule</title>hoera
          <meta name="description" content="Description of Schedule" />
        </Helmet>
        <div>Hello World</div>
      </div>
    );
  }
}

Where is added container in React app?

2 Answers2