CODEWITHSUNDEEP
javascriptreactjs
Angel Cuenca
Angel Cuenca

Reputation: 1659

How to render variable with HTML elements in ReactJs?

Firstly I create a variable liTagsPagination with <a> elements depending on sectionsXml size array. And after that insert that variable into htmlPagination. And finally render htmlPagination variable with all html content.

But the output in the view is only the content of liTagsPagination in plain text. In DOM the liTagsPagination is appended to <ul> but no as a different element. 

render() {
 let liTagsPagination = "";
 this.state.sectionsXml.forEach(function(elementSection, indexSection) {
    liTagsPagination += "<li><a id=\"_sectionPage"+ indexSection +"\" className=\"section\">"+(indexSection+1)+"<\/a><\/li>";
 });

 const htmlPagination = (
   <div id="pages-nav-branch" className="col-xs-12 text-center">
       <ul className="pagination pagination-section pagination-sm">
           {liTagsPagination}
       </ul>
   </div>
 );

 return(
    <div>
       {htmlPagination}
    </div>
 )
}

Upvotes: 5

Views: 16495

Answers (4)

TLadd
TLadd

Reputation: 6884

For the sample you provided, it would be better to just use jsx rather than creating a html string and inserting it. 

render() {
   const liTagsPagination = this.state.sectionsXml.map(function(elementSection, indexSection) {
      return (
         <li key={indexSection}>
           <a id={`_sectionPage${indexSection}`} className="section">
             {`+(${indexSection+1})+`}
           </a>
         </li>
      );
   });

   const htmlPagination = (
     <div id="pages-nav-branch" className="col-xs-12 text-center">
         <ul className="pagination pagination-section pagination-sm">
             {liTagsPagination}
         </ul>
     </div>
   );

   return(
      <div>
         {htmlPagination}
      </div>
   )
}

If however, you do encounter a scenario where you absolutely need to insert an html string, you can use dangerouslySetInnerHtml (https://facebook.github.io/react/docs/dom-elements.html)

Upvotes: 1

Panther
Panther

Reputation: 9408

The content of liTagsPagination will be displayed in plain text bcoz you are forming a simple string. This will be displayed as string. Rather you should use JSX to generate HTML as other parts of your code is generated by HTML.

You can form JSX instead of HTML which will get your desired behaviour. This will create an array of li tags which can be rendered directly. key is important when you are looping to form JSX tags.

const liTagsPagination= this.state.sectionsXml.map(function(elementSection, indexSection) {
  return (<li key={indexSection}>
       <a id={`_sectionPage${indexSection}`} className="section">
        {indexSection+1}
       </a>
   </li>);
});

If you want to use only HTML, then you have to make use of dangerouslySetInnerHTML which is not preferred.

Upvotes: 1

M0nst3R
M0nst3R

Reputation: 5283

You are rendering strings inside the JSX language which is causing your problem, you need to change your code to do the following :

let liTagsPagination = this.state.sectionsXml.map((element, index) => {
    return (
        <li>
            <a id={ `_sectionPage${index}` }
               className="section">
               { index + 1 }
            </a>
        </li>
    );
});

Upvotes: 1

palsrealm
palsrealm

Reputation: 5243

Use map instead of foreach in render to create the array of li tags. Do not use string concatenation.

render() {

    let liTagsPagination= this.state.sectionsXml.map(function(elementSection, indexSection) {
         return <li><a id={"_sectionPage"+ indexSection} className="section">{indexSection+1}</a></li>;
    });

    const htmlPagination = (
      <div id="pages-nav-branch" className="col-xs-12 text-center">
          <ul className="pagination pagination-section pagination-sm">
              {liTagsPagination}
          </ul>
      </div>
    );

    return(
       <div>
          {htmlPagination}
       </div>
    )
  }

Upvotes: 2

Related Questions