Using Map function inside the render() -> return() but it's not getting displayed

Question

I am learning React and having trouble in rendering list (ul>li's) using map function inside a UL JSX element inside a render function. I searched on internet but unable to resolve the issue. Below is my component code:(in this component implementing the Pagination)

Code snippet:

    //function returning list with values 1-total_pages e.g total_pages=5
        make_pages_list = (start, end, step) => {
        return Array.from(Array.from(Array(Math.ceil((end-start+1)/step)).keys()), x => start+ x*step);
    }

render() {
   return(
      <div>
      <div>Hi there
       <form>
           <input type="text"/>
           <input type="submit"/>
       </form>
      </div>
     ........ 
     //other JSX elements are also there
    //then
                    <div>
                        <div className='ui container'>
                            <ul style={{listStyle: "none"}}>
                                {this.make_pages_list(1,this.state.total_pages, 1).map((n) =>{
                                   <li key={n} id={n}><a href="#">{n}</a></li>    
                                }
                                )}
                            </ul>
                        </div>
                    </div>
                </div>

   )

}

Additionally: I have also the module "react-addons-create-fragment" but then style of ul is not working on it.

Your .map() function is not returning anything.

rickdenhaan
– rickdenhaan

2019-08-23 16:22:21 +00:00
Commented Aug 23, 2019 at 16:22 — rickdenhaan
– rickdenhaan, Commented Aug 23, 2019 at 16:22

ravibagul91 · Accepted Answer · 2019-08-23 16:25:42Z

5

You should return from map function

{this.make_pages_list(1,this.state.total_pages, 1).map((n) =>{
   return <li key={n} id={n}><a href="#">{n   }</a></li>    
}
)}

or

{this.make_pages_list(1,this.state.total_pages, 1).map((n) =>(
   <li key={n} id={n}><a href="#">{n   }</a></li>    
)
)}

edited Aug 23, 2019 at 16:25

answered Aug 23, 2019 at 16:23

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

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

1 Comment

ravibagul91 Over a year ago

When you add the return what happened?

Collectives™ on Stack Overflow

Using Map function inside the render() -> return() but it's not getting displayed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related