CODEWITHSUNDEEP
reactjs
Mohit Sharma
Mohit Sharma

Reputation: 11

TypeError: instance.render is not a function

import React, { Component } from 'react'; 

class App extends Component { 
    constructor(props) { 
        super(props); 
        this.state = { data: null, }; 
    } 

    componentDidMount() { 
        fetch('https://jsonplaceholder.typicode.com/todos/1') 
            .then(response => response.json())  
            .then(json => console.log(json)); 
    } 

}

export default App;

Upvotes: 1

Views: 1479

Answers (2)

Jayanti Lal
Jayanti Lal

Reputation: 1185

If you are using class component you need to render something. for example lets make your code working. 

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

class App extends Component { 
    constructor(props) { 
        super(props); 
        this.state = { data: null, }; 
    } 

    componentDidMount() { 
        fetch('https://jsonplaceholder.typicode.com/todos/1') 
            .then(response => response.json())  
            .then(json => console.log(json)); 
    } 
    public render() {
            return (<div> my component </div>)
    }
}

export default App;

here you can see component is rendering a div. I would suggest you can kick start your react learning from react basic tutorial this will help you getting basics before you start working on it. Enjoy react :)

Upvotes: 0

Vencovsky
Vencovsky

Reputation: 31565

You need to render something in your component, this means having a render method in your class.

Please take a look at the react docs. and in the render where it says.

The render() method is the only required method in a class component.
When called, it should examine this.props and this.state and return one of the following types:

  • React elements. Typically created via JSX. For example, <div /> and <MyComponent /> are React elements that instruct React to render a DOM node, or another user-defined component, respectively.
  • Arrays and fragments. Let you return multiple elements from render. See the documentation on fragments for more details.
  • Portals. Let you render children into a different DOM subtree. See the documentation on portals for more details.
  • String and numbers. These are rendered as text nodes in the DOM.
  • Booleans or null. Render nothing. (Mostly exists to support return test && pattern, where test is boolean.)

So making an example with the code from your question

import React, { Component } from 'react'; 

class App extends Component { 
    constructor(props) { 
        super(props); 
        this.state = { data: null, }; 
    } 

    componentDidMount() { 
        fetch('https://jsonplaceholder.typicode.com/todos/1') 
            .then(response => response.json())  
            .then(json => console.log(json)); 
    } 
    
    // added the render method
    render() {
        return (
            // needs to return some of the above listed options
        )
    }

}

export default App;

Upvotes: 2

Related Questions