React-Bootstrap grid contents not displaying

I created a grid inside of a react-bootstrap Jumbotron, but when I export it to my app.jsx none of the grid contents are displayed (but the Jumbotron and my custom styles are)

All of my other components are working fine, so I’m not sure why this isn’t.

App.js:

import React, { Component } from 'react';
import {Grid} from 'react-bootstrap';
import {Row} from 'react-bootstrap';
import {Col} from 'react-bootstrap';
import MyNavbar from './modules/MyNavbar.jsx';
import SectionOne from './modules/SectionOne.jsx'
import SectionTwo from './modules/SectionTwo.jsx'
import SectionThree from './modules/SectionThree.jsx';

class App extends Component {
    render() {
        return (
            <div className="App">
                <MyNavbar/>
                <SectionOne/>
                <SectionTwo/>
                <SectionThree/>
            </div>
        );
    }
}

export default App;

SectionThree.jsx:

import React, { Component } from 'react';
import {Jumbotron} from 'react-bootstrap';
import howItWorks from './howItWorks.jsx';

class SectionThree extends Component {
    render() {
        return(
            <Jumbotron id="jumbotronThree">
                <howItWorks/>
            </Jumbotron>
        )
    }
}

export default SectionThree;

howItWorks.jsx:

import React, { Component } from 'react';
import {Image} from 'react-bootstrap';
import {Grid} from 'react-bootstrap';
import {Col} from 'react-bootstrap';
import {Row} from 'react-bootstrap';

class howItWorks extends Component {
    render() {
        return(
            <div>
                <Grid fluid>
                    <Row>
                        <Col md={4}>
                            <div className="searchIcon">
                                <Image src="http://imgur.com/KgAIBCc.jpg" responsive/>
                            </div>
                        </Col>
                        <Col md={4}>
                            <div className="payIcon">
                                <Image src="http://imgur.com/KgAIBCc.jpg" responsive/>
                            </div>
                        </Col>
                        <Col md={4}>
                            <div className="eatIcon">
                                <Image src="http://imgur.com/KgAIBCc.jpg" responsive/>
                            </div>
                        </Col>
                    </Row>
                    <Row>
                        <Col md={4}>
                            <p>
                                test
                            </p>
                        </Col>
                        <Col md={4}>
                            <p>
                                test
                            </p>
                        </Col>
                        <Col md={4}>
                            <p>
                                test
                            </p>
                        </Col>
                    </Row>
                </Grid>
            </div>
        )
    }
}

export default howItWorks;

Answer

React components should always start with uppercase letter:

class HowItWorks extends Component {
  render() {
  ...

<Jumbotron id="jumbotronThree">
  <HowItWorks/>
  ...

There is a good answer on stackoverflow here covering this.

Advertisement

Answer