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>←</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>
)
}
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>←</i>Previous</span></li>`
}
ulTag.innerHTML = liTag;
}
render() {
return (
<div className="Pagination">
<ul>
{this.pagincationScript(10, 5)}
</ul>
</div>
)
}
}
export default Pagination;