Error: 'return' outside of function in react js

Question

I don't know why i am getting this error can someone please help i have checked the syntax and cant find anything wrong. It's probably something stupid but i just can't find what it is.

import React, { Component } from 'react';
//import Node from './Node/Node';
import { render } from 'react-dom'

import './Pathfinder.css';

export default class Pathfinder extends Component {
   constructor(props){
    super(props);
    this.state = {
        grid: [], 
};
}
}

render(); {

    return (
        <div>
            {this.startGrid()}
        </div>
    );

}```

CFLS · Accepted Answer · 2020-08-31 19:54:58Z

4

I think that you copy-n-paste the code, but you messed up with the curly braces.

import React, { Component } from 'react';
//import Node from './Node/Node';
import { render } from 'react-dom'

import './Pathfinder.css';

export default class Pathfinder extends Component {
   constructor(props){
       super(props);
       this.state = {
           grid: [], 
       };
   }
   } <-- should be removed

   render() { <-- remove the ; sign
       return (
           <div>
             {this.startGrid()}
           </div>
       );
    }
} <-- close your component with curly braces

Tip for every code: Use the correct indentation. Tip for some codes: Use a linter with prettier.

edited Aug 31, 2020 at 19:54

answered Aug 31, 2020 at 19:43

CFLS

3551 silver badge9 bronze badges

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

Comments

Harmandeep Singh Kalsi · Accepted Answer · 2020-08-31 19:44:53Z

3

Issue is semicolon after the render keyword.

And render method is outside the class component due to wrongly placed brackets

render(); {}

Change it to

render() {}

Code should look like :

    import React, { Component } from 'react';
    //import Node from './Node/Node';
    import { render } from 'react-dom'
    
    import './Pathfinder.css';
    
    export default class Pathfinder extends Component {
       constructor(props){
        super(props);
        this.state = {
            grid: [], 
    };
    }
  
    
    render() {
    
        return (
            <div>
                {this.startGrid()}
            </div>
        );
    
    }
 }

edited Aug 31, 2020 at 19:44

answered Aug 31, 2020 at 19:42

Harmandeep Singh Kalsi

3,3652 gold badges17 silver badges31 bronze badges

3 Comments

Ben.Clough Over a year ago

when i take the semicolon away the compiler starts giving me errors so i kept it in there but its stupid. it comes up as a syntax error

Ben.Clough Over a year ago

yeh that works fine thanks and sorry i accidentally deleted your comment earlier

Harmandeep Singh Kalsi Over a year ago

Awesome. Glad it helped you . I hope you wont mind accepting the answer and upvoting it

Collectives™ on Stack Overflow

Error: 'return' outside of function in react js

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related