string to html conversion in javascript

Question

I want to print p as a html but its printing as it is in my webpage as a string what should I do for printing as a html object in my webpage The code is given below

    const page_nav = () => {
            var no=FilterBooks.length/20;
            var p=''
            for(var i=1;i<=no;i++){
               p=p+'<li className="page-item" onClick=book1('+i+')><a className="page-link">'+i+'</a></li>'
            }
            return (p);
    }
    const bookl = (baselimit) => {

        if (FilterBooks.length == 0) {
            return (<p> No Books Found</p>
            )
        } else if(FilterBooks.length<20){
            return( <div id="root"><Bookslist
            filterbooks={FilterBooks}
        /></div>)
        }
        else {
            return (
                <div id='bookdisplay'>
                    <div id="root"><Bookslist
                        filterbooks={FilterBooks.slice(baselimit,baselimit+20)}
                    /></div>
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            {
                                page_nav()
                            }
                            {/* {<li class="page-item"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>} */}
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>

                </div>)
        }

Please can someone help with this??

First question - why? Why can't you simply render it the JSX way? — kabirbaidhya
– kabirbaidhya, Commented Sep 26, 2020 at 9:33

Dennis Vash · Accepted Answer · 2020-09-26 09:43:23Z

2

You don't need to convert string to HTML, just render the JSX:

// Same logic as page_nav()
<>
  {[...Array(FilterBooks.length / 20).keys()].map((key) => (
    <li className="page-item" key={key} onClick={() => bookl(key+1)}>
      <a className="page-link">{key+1}</a>
    </li>
  ))}
</>

answered Sep 26, 2020 at 9:43

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

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

Comments

Dean James · Accepted Answer · 2020-09-26 09:38:55Z

-1

You can set innerHTML but I would not recommend as it's easy to inadvertently expose your users to a cross-site scripting (XSS) attack:

<div dangerouslySetInnerHTML={{__html: '<strong>strong text</strong>'}} />

You could also try html-react-parser.

I'd just do it the proper way with JSX.

answered Sep 26, 2020 at 9:38

Dean James

2,6434 gold badges23 silver badges30 bronze badges

Collectives™ on Stack Overflow

string to html conversion in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related