Calling a function from Render - React

Question

I'm trying to call a function called makeMap in render function. Everything is being printed out to the console, however, it doesn't update the HTML. Would love to know what I'm doing wrong and what's the right way to do that. :)

import React from "react";
import axios from "axios";

export default class CountryList extends React.Component {
    state = {
        countries: []
    }

    componentDidMount() {
        axios.get(`https://restcountries.com/v2/all?fields=name,region,area`)
        .then(res => {
            const countries = res.data;
            this.setState({ countries });
        })
    }

    makeMap() {
        this.state.countries.map(country => {
                console.log("aaaaaaaaa");
                return (<li key={country.name}>{country.name}</li>)
        })
    }

    render() {
        return(
            <div>
                {this.makeMap()}
            </div>
        )
    }
}

oh, didn't even realise that I'm not returning from makeMap. Thank you :) — mimasik
– mimasik, Commented Mar 18, 2022 at 1:46

The KNVB · Accepted Answer · 2022-03-18 01:49:46Z

1

You may change the makeMap() function as below:

makeMap() {
    return this.state.countries.map(country =>                 
      (<li key={country.name}>{country.name}</li>)
    )
}

answered Mar 18, 2022 at 1:49

The KNVB

3,8523 gold badges35 silver badges64 bronze badges

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

Collectives™ on Stack Overflow

Calling a function from Render - React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related