'render' is not defined when running create react app

Question

When I am using create react app when compliling I get the following errors ./src/Grid.js "Line 3: Your render method should have return statement" and "Line 5: 'render' is not defined" this is the contents of the the Grid.js file

import React, { Component } from 'react';

class Grid extends Component {
    render(){
        return <p>Hello, World</p>;
    }
}

export default Grid;

I can't see that is wrong here? any help appreciated

import React, { Component } from 'react';
import Grid from './Grid.js';

class App extends Component 
{
  render()
  {
    return(
      <div> 
        <Grid />
      </div>
    );
  }
}

export default App;

This is where I am using the component

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Where ReactDOM render is used

What happens if you use a functional component, e.g. const Grid = () => <p>Hello, World</p>; — Tom
– Tom, Commented Jun 6, 2017 at 13:12
I've appended where I am rendering the component in the original question — Grizzlyuncle
– Grizzlyuncle, Commented Jun 6, 2017 at 13:16
I'm suspecting something hasn't downloaded properly when you created the create-react-app. Have you tried running npm install within the app, or perhaps just starting again and importing the files you created? — Tom
– Tom, Commented Jun 6, 2017 at 13:39

karoluS · Accepted Answer · 2019-02-13 19:27:02Z

10

You are missing import {render} from 'react-dom';.

answered Feb 13, 2019 at 19:27

karoluS

3,2582 gold badges28 silver badges47 bronze badges

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

1 Comment

uberrebu Over a year ago

is it react-dom or react-router-dom?

ardilgulez · Accepted Answer · 2017-06-06 13:31:51Z

0

It should be:

import React, { Component } from 'react';

class Grid extends Component {
    render(){
        return(<p>Hello, World</p>);
    }
}

export default Grid;

The above quote no longer applies.

I tried your exact code for Grid.js and App.js from the question and it works well on my machine. Whatever reason why your thing isn't working isn't in your Grid.js or App.js.

edited Jun 6, 2017 at 13:31

answered Jun 6, 2017 at 13:05

ardilgulez

1,96419 silver badges19 bronze badges

6 Comments

Shubham Khatri Over a year ago

No thats not a necesity

Dan Over a year ago

If you're returning a one line component, brackets aren't necessary

Grizzlyuncle Over a year ago

Thanks, I'm still getting the compile issue even with the parenthesis around the jsx :(

Grizzlyuncle Over a year ago

If I remove the <Grid /> from App.js and remove the Grid import and render some plain HTML in the render function it works fine.

Grizzlyuncle Over a year ago

Wow I created a new file with the exactly the same code for the component and it compiles fine. strange.

|

Aashish Kumar · Accepted Answer · 2024-12-14 11:33:05Z

0

In My case, I forget to write .Provider with my createdContext.

answered Dec 14, 2024 at 11:33

Aashish Kumar

1,0467 silver badges11 bronze badges

Comments

Grizzlyuncle · Accepted Answer · 2017-06-06 14:44:07Z

-1

Still no real explanation for this. Copying the component code in to a newly created file compiles correctly. Very strange indeed.

answered Jun 6, 2017 at 14:44

Grizzlyuncle

211 gold badge1 silver badge3 bronze badges

Collectives™ on Stack Overflow

'render' is not defined when running create react app

4 Answers 4

1 Comment

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related