React, HTML and JavaScript: TypeError: Cannot set property 'innerHTML' of null

Question

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;

In general, if you're using document.querySelector you're not using React the right way. Can you explain more about what you're trying to do and what your markup looks like? — jmargolisvt
– jmargolisvt, Commented Jan 12, 2021 at 4:19
Adding html manually like this in react is not the right way — Sudhanshu Rai
– Sudhanshu Rai, Commented Jan 12, 2021 at 4:21
Its just a <ul> tag as shown in the question within render(). I hope I answered your question — night_programmer
– night_programmer, Commented Jan 12, 2021 at 4:23
@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. — night_programmer
– night_programmer, Commented Jan 12, 2021 at 4:36

Ross Allen · Accepted Answer · 2021-01-12 13:57:11Z

2

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>
  )
}

edited Jan 12, 2021 at 13:57

answered Jan 12, 2021 at 4:25

Ross Allen

45k14 gold badges100 silver badges97 bronze badges

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

3 Comments

night_programmer Over a year ago

Yeah I did that and it works perfectly fine but I want to loop a certain amount of time to display the <li> tags. How can I use the for loop with the approach you mentioned above?

Ross Allen Over a year ago

I added an example of looping 10 times, creating 10 <Li> elements.

night_programmer Over a year ago

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.

Collectives™ on Stack Overflow

React, HTML and JavaScript: TypeError: Cannot set property 'innerHTML' of null

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related