Elements from map function in React is not rendering

Question

I am not able to render any elements returned from a function in rendering

this.state.globalConfirmedCases.isLoading 
                        ? 
                    <Loading/> 
                        : 
                    this.generateCount(this.state.globalConfirmedCases)
generateCount = ()=> {
        this.state.globalConfirmedCases.data.map((item, index)=>{
            console.log(typeof(item.confirmed.value))
            console.log(this.state.globalConfirmedCases.data)
            return (
                <CountUp
                    key={index}
                    end={item.confirmed.value}
                />
            )
        })
    }

What I am doing wrong here?

I am wondering if its race condition. meaning your state might not have data when it renders? do you see output in console.log(this.state.globalConfirmedCases.data) ? — newdeveloper
– newdeveloper, Commented May 5, 2020 at 19:47

norbitrial · Accepted Answer · 2020-05-05 19:55:25Z

2

Your generateCount() function does not return anything, just undefined.

Try instead as the following in order to return what .map() creates:

generateCount = () => this.state.globalConfirmedCases.data.map((item, index) => 
   <CountUp key={index} end={item.confirmed.value} />
)

See an example for difference:

const array = [1,2,3];

const example1 = () => {
   array.map(e => e);
}

const example2 = () => array.map(e => e);
    
console.log(example1());
console.log(example2());

I hope this helps!

edited May 5, 2020 at 19:55

answered May 5, 2020 at 19:47

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

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

1 Comment

norbitrial Over a year ago

@JithinZacharia Happy to help!

Varun Sharma · Accepted Answer · 2020-05-05 19:53:50Z

0

You should share more detailed code here for better understanding the issue. Anyhow, what I think is you are not returning the function. Write return in front of this keyword like:

generateCount = ()=> {
        return this.state.globalConfirmedCases.data.map((item, index)=>{
            console.log(typeof(item.confirmed.value))
            console.log(this.state.globalConfirmedCases.data)
            return (
                <CountUp
                    key={index}
                    end={item.confirmed.value}
                />
            )
        })
    }

answered May 5, 2020 at 19:53

Varun Sharma

2061 silver badge9 bronze badges

Collectives™ on Stack Overflow

Elements from map function in React is not rendering

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related