Solution 1 :

When writing React you should always be writing JSX, like in the render function you wrote. To render the <li> separately you can do something like the following:

function Li() {
  return (
    <li className="Btn Previous"><span><i>&#8592;</i>Previous</span></li>
  )
}

export default function Pagination() {
  // Loop as many times as needed
  const lis = [];
  for (let i = 0; i < 10; i++) {
    lis.push(<Li key={i} />);
  }

  return (
    <div className="Pagination">
      <ul>
        {lis}
      </ul>
    </div>
  )
}

Problem :

I am using React and I am getting the following error: TypeError: Cannot set property 'innerHTML' of null. I did see some questions related to this error but I did not find any that helped me.

//React
class Pagination extends Component {

  pagincationScript = (totalPages, page) =>{
    const ulTag = document.querySelector("ul");

    let liTag = '';
    if(page > 1){
      liTag = `<li className="Btn Previous"><span><i>&#8592;</i>Previous</span></li>`
    }

ulTag.innerHTML = liTag;

  }

  render() {

    return (
      <div className="Pagination">
        <ul>

        {this.pagincationScript(10, 5)}

        </ul>
      </div>
    )
  }
}

export default Pagination;

Comments

Comment posted by jmargolisvt

In general, if you’re using

Comment posted by Sudhanshu Kumar

Adding html manually like this in react is not the right way

Comment posted by night_programmer

Its just a

    tag as shown in the question within render(). I hope I answered your question

    Comment posted by night_programmer

    @jmargolisvt so basically for my school project I am building a basic pagination component that displays 20 rows of data per page. I am grabbing the tags using document.querySelector.

    Comment posted by How to loop in react

    Does this answer your question?

    Comment posted by night_programmer

    Yeah I did that and it works perfectly fine but I want to loop a certain amount of time to display the

  • tags. How can I use the for loop with the approach you mentioned above?

    Comment posted by Ross Allen

    I added an example of looping 10 times, creating 10

  • elements.

    Comment posted by night_programmer

    Thank you so much! Dont know why people are so quick to give a down vote. I am still learning. But thank you so much. Your post helped and may you continue to help others like you helped me.

By