React - Load JSON and render component

Question

As the title says, I'm trying to render a React component which contains data that I grabbed from a JSON by loading it using fetch().

The api call works just fine, but I'm not able to render the data.

Here's the code:

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            user: {}
        }
    }

    getUserById(uId) {
        fetch(`https://jsonplaceholder.typicode.com/users/${uId}`)
            .then( (response) => {
                return response.json()
            })
            .then( (json) => {
                return json;
            });
    }

    componentDidMount() {
        this.setState({
            user: this.getUserById(4)
        })
    }

    render() {
        return (
            <div>
                <h1>User</h1>
                <p>ID: {this.state.user.id}</p>
            </div>
        );
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById("container")
);

<div id="container"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Any idea on solving this issue?

Answer 1

Issue is in this line:

<div class="container"></div>

You defined class and getting it by getElementById.

Another change is, ajax call will be async so getUserById will not return the data immediately and setState will set undefined value in state variable not the data returned from server. To solve this problem do the setState once you get the response.

Check this:

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            user: {}
        }
    }

    getUserById(uId){
        fetch(`https://jsonplaceholder.typicode.com/users/${uId}`)
        .then( (response) => {
            return response.json()
        })
        .then( (json) => {
            this.setState({
                user: json
            })
        });
    }

    componentDidMount() {
        this.getUserById(4);
    }

    render() {
        console.log(this.state.user);
        return (
            <div>
                <h1>User</h1>
                <p>ID: hello</p>
            </div>
        );
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById("container")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

Note: You are making a ajax call so instead of calling funtion inside setState, do the setState once you get the response, inside .then, like this:

.then(json => {
    this.setState({user: json});
 });

Answer 2

Try binding the getUserById method and also setState for your user object with the json response.

class App extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        user: {}
    }
this.getUserById = this.getUserById.bind(this); //add this to your constructor
}

getUserById(uId) {
    fetch(`https://jsonplaceholder.typicode.com/users/${uId}`)
        .then( (response) => {
            return response.json()
        })
        .then( (json) => {
            return json; //setState in here with your ajax request**strong text**
        });
}

componentDidMount() {
    this.setState({
        user: this.getUserById(4)
    })
}

render() {
    return (
        <div>
            <h1>User</h1>
            <p>ID: {this.state.user.id}</p>
        </div>
    );
}
}

ReactDOM.render(
<App/>,
document.getElementById("container")