1
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;
1
  • 1
    In react render is the only required method. If you don't have anything to return then do this render(){return null} Commented Aug 2, 2019 at 13:59

2 Answers 2

2

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;
Sign up to request clarification or add additional context in comments.

Comments

0

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 :)

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.