When I am using create react app when pliling 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 ponent

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

When I am using create react app when pliling 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 ponent

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

• javascript
• reactjs
• create-react-app

• What happens if you use a functional ponent, e.g. const Grid = () => <p>Hello, World</p>; – Tom Commented Jun 6, 2017 at 13:12
• try render() { return (some value) – bxN5 Commented Jun 6, 2017 at 13:13
• can you show where you are rendering this ponent? – Mayank Shukla Commented Jun 6, 2017 at 13:14
• I've appended where I am rendering the ponent in the original question – 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 Commented Jun 6, 2017 at 13:39

4 Answers 4

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

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.

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

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