React not rendering simple component

Question

I'm new to React thus the question. I'm trying to render a basic React component. This is my index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React</title>
  </head>
  <body>

    <div id="root"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

This is my index.js

import React from 'react';
import 'babel-polyfill';
import { render } from 'react-dom';
import './styles/style.css';
import  '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Layout from './components/Layout';

React.render(<Layout />, document.getElementById("root"));

This is my Layout component.

import React from 'react';
import {render } from 'react-dom';

class Layout extends React.Component{
  render(){
    return(
      <div className="container-fluid">
        <div className="jumbotron">
          <h1>This is home now</h1>
        </div>
      </div>
    );
  }
}
export default Layout;

This is the error I see on the console,

Uncaught TypeError: _react2.default.render is not a function

When I start the dev server, I see a blank page with nothing getting rendered. Any help appreciated.

Do you see anything in console when you load the page? warnings/errors — finalfreq
– finalfreq, Commented Oct 26, 2016 at 21:12
You've got them mixed up - ReactDOM.render not React.render — Andrew Li
– Andrew Li, Commented Oct 26, 2016 at 21:13

Caleb Anderson · Accepted Answer · 2016-10-26 21:22:58Z

2

The way you import the render function inside index.js from react-dom changes the way you invoke it.

import { render } from 'react-dom';

Here you just import the render method from the react-dom object. So to use it you would say

render(<Layout />, document.getElementById("root"));

edited Oct 26, 2016 at 21:22

answered Oct 26, 2016 at 21:18

Caleb Anderson

1215 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andrew Li Over a year ago

I would recommend addressing the possible confusion. render inside the component is not ReactDOM.render, and is not used for actually rendering to DOM - that's what ReactDOM.render is for

Caleb Anderson Over a year ago

@AndrewLi Im referring to the import in the index.js file. edited to specify

Andrew Li Over a year ago

I understand that, but mention there is no need for the react-dom import in the component. It may be a source of confusion

Collectives™ on Stack Overflow

React not rendering simple component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related