Inline React JS For Loop For Pagination

Question

I am trying to make a inline for loop for my pagination in react js but it doesn't seem to be working im curious to if anyone has an idea of how to do it.

currently I am doing this:

<ul class="pagination">
  <li>
    <a href="#" aria-label="Previous">
      <span aria-hidden="true">«</span>
    </a>
  </li>
  {this.state.searching ? 
    ''
    :

    Code for page buttons here

    }
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>

I am using the bootstrap pagination so i dont really need any styles but the problem is i want it to dynamically change how many pages are displayed based on how many things the search returns.

I want to display 3 results per page and the amount of results is stored in my state as amountofjobs

TL:DR Create loop to dynamically display pagination page buttons based on search not working.

i was trying to do this:

for(i = 0; i < this.state.amountofjobs / 3; i++){
  with normal jsx/html here to display but it kept saying i was missing an expression
}

I tried to do the normal js for loop inside of the true false statement and it kept saying i was missing an expression even if i had one — , Dec 07 '17 at 08:25
You need to use map. Have you tried this ?https://stackoverflow.com/questions/39965579/how-to-loop-an-object-in-react — klugjo, Dec 07 '17 at 08:28
map only works for objects if im right the data stored in amount of jobs is a number — , Dec 07 '17 at 08:31
Thanks for updating the question. Then you can first create an array with your number. Using lodash `_.range(this.state.amountofjobs)` for example https://lodash.com/docs/4.17.4#range — klugjo, Dec 07 '17 at 09:01

Shashith Darshana · Accepted Answer · 2017-12-07T08:58:26.383

1

You can return an array

Document.

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

    render() {

        var pagesArray = [];
        for (var i = 0; i < this.props.pages; i++) {
            pagesArray.push(<li>{i}</li>);
        }

        return(
            <li>
                 {pagesArray}
            </li>
        );
    }
}

ReactDOM.render(
  <Hello pages={5} />,
      document.getElementById('container')
);

Working fiddle

edited Dec 07 '17 at 08:58

answered Dec 07 '17 at 08:31

Shashith Darshana

2,715
1
25
27

as i just said before amountofjobs is a number not an array so i cannot use .map i would have done so if it was – Dec 07 '17 at 08:32

Inline React JS For Loop For Pagination

1 Answers1