React ES6 importing a stateless component

Question

I have been searching for the answer to this forever lol. How can I import a stateless react class into another class? I am getting the error:

"warning.js:45Warning: HTMLImageElement(...): No render method found on the returned component instance: you may have forgotten to define render , returned null/false from a stateless component, or tried to render an element whose type is a function that isn't a React component."

I am trying to import the CalloutImage component....

import React from 'react';
import ReactDOM from 'react-dom';

export class CalloutImage extends React.Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
    }
    render() {
        return (
            <Image onClick={this.handleClick} className="header-img" src="https://images.unsplash.com/photo-1453106037972-08fbfe790762?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=cbaaa89f2c5394ff276ac2ccbfffd4a4" />
        )
    }
    handleClick() {
        alert();
    }

}

into ....

import { CalloutImage } from './CalloutImage.jsx'

const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'

class App extends React.Component {
    render() {
        return (
            <div>
                <Navigation />
                <Grid>
                    <CalloutImage />
                    <ColumnContent />
                </Grid>
                <Footer />
            </div>
        ) 
    }
}

class Navigation extends React.Component {
    render() {
        return (
            <Navbar inverse>
                <Navbar.Header>
                    <Navbar.Brand>VA</Navbar.Brand>
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse>
                    <Nav>
                        <NavItem eventKey={1} href="#">Home</NavItem>
                        <NavItem eventKey={2} href="#">About</NavItem>
                        <NavItem eventKey={3} href="#">Users</NavItem>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        )
    }
}

class ColumnContent extends React.Component {
    render() {
        return (
            <Row>
                <Col sm={6}>
                    <h2>Heading 2</h2>
                    <p>{lorem}</p>
                </Col>
                <Col sm={6}>
                    <h2>Heading 2</h2>
                    <p>{lorem}</p>
                </Col>
            </Row>
        )
    }
}




class Footer extends React.Component {
    render() {
        return (
            <footer>
                <Grid>
                    <p>VA &copy;</p>
                </Grid>
            </footer>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'))

Answer 1

Image应该是小写的，否则React认为它是一个React组件，并尝试在其上调用render() 。

Answer 2

In React JSX, if you are using HTML tags , then it should be lowercase . For all other user-defined or any other imported components from external packages should always be Capitalized .

In your code, since you are using <Image /> component from react-bootstrap you should import that component into your file and then use it.