How to render variable with HTML elements in ReactJs?

Question

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

palsrealm · Accepted Answer · 2017-09-29 15:26:44Z

2

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

answered Sep 29, 2017 at 15:26

palsrealm

5,2531 gold badge22 silver badges25 bronze badges

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

1 Comment

Angel Cuenca Over a year ago

Great approach, whereas there may be other elements that are not mapping in return.

M0nst3R · Accepted Answer · 2017-09-29 15:27:43Z

1

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

answered Sep 29, 2017 at 15:27

M0nst3R

5,3131 gold badge28 silver badges39 bronze badges

Comments

Panther · Accepted Answer · 2017-09-29 15:31:57Z

1

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.

edited Sep 29, 2017 at 15:31

answered Sep 29, 2017 at 15:26

Panther

9,5183 gold badges26 silver badges37 bronze badges

Comments

Angel Cuenca · Accepted Answer · 2017-09-29 16:41:52Z

1

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)

edited Sep 29, 2017 at 16:41

Angel Cuenca

1,6696 gold badges25 silver badges48 bronze badges

answered Sep 29, 2017 at 15:32

TLadd

6,9042 gold badges34 silver badges40 bronze badges

1 Comment

Angel Cuenca Over a year ago

Same approach that @palsrealm. He answered first, but thanks.

Collectives™ on Stack Overflow

How to render variable with HTML elements in ReactJs?

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related