How to return html text variable in react and print as html?

Question

Function 1 Which returns JSON array.

function allPlans()
{
    var all_plans = {
            'Stock Card Views' : {
                'free':{status:true,plantext:"5 Per Month"},
                'premium':{status:true,plantext:"Unlimited"},
                'vip':{status:true,plantext:"5 Per Month"}                            
            },
            'Portfolio Creation' : {
                'free':{status:true,plantext:"Unlimited"},
                'premium':{status:true,plantext:"Unlimited"},
                'vip':{status:true,plantext:"Unlimited"}                            
            },
            'Transactions In A Portfolio' : {
                'free':{status:true,plantext:"Unlimited"},
                'premium':{status:true,plantext:"Unlimited"},
                'vip':{status:true,plantext:"Unlimited"}                            
            },
            'Advance Filter':{
                'free':{status:true,plantext:"-"},
                'premium':{status:true,plantext:"Full Access"},
                'vip':{status:true,plantext:"Full Access"}                            
            },
            'Stock Card Requests' : {
                'free':{status:true,plantext:"-"},
                'premium':{status:true,plantext:"3 Per Month"},
                'vip':{status:true,plantext:"3 Per Month"}                            
            },
            'Premium Posrfolio Access' : {
                'free':{status:true,plantext:"-"},
                'premium':{status:true,plantext:"-"},
                'vip':{status:true,plantext:"1 Portfolio"}                            
            },
            'Investment Pick' : {
                'free':{status:true,plantext:"-"},
                'premium':{status:true,plantext:"-"},
                'vip':{status:true,plantext:"1 Per Month"}                            
            },
        }

    return all_plans;
}

Function 2: Used Above function in below function

function renderPlansArray()
{

    var all_plans = allPlans();
    var rowclass = true;

    var htmltext = "";
    for(var PlanName in all_plans) 
    {

        console.log(plan_item_gray);
        if (props.planname == 'free')
        {

            if(rowclass == true)
            {
                rowclass = false;
                htmltext += <div className={plan_item_gray}>all_plans[PlanName]['free']['plantext']</div>;
            }
            else
            {
                rowclass = true;
                htmltext += <div className={plan_item}>all_plans[PlanName]['free']['plantext']</div>;
            }


        }

    }

    return(htmltext);

}

In the above function, I have generated an HTML Text in htmltext variable and return. But when I return same like above this will return [object Object] and when I convert into a string then it will print HTML text as it is.

I want to return this variable as HTML.

I have called above function in another function to render HTML like below.

return (<div className={plan_column}>
   {renderPlansArray()}
</div>)

It is returning:

AND

I need HTML LIKE:

Abhas Tandon · Accepted Answer · 2018-10-05 13:16:26Z

2

Since you want to set HTML directly you need to use dangerouslySetInnerHTML something like:

someHtml = '<div><strong>blablabla<strong><p>another blbla</p/></div>'


return(<div className="Container" dangerouslySetInnerHTML={{__html: 
            someHtml}}></div>)

However, this is not the way you are supposed to work with jsx & react. A better approach will be to use React.components and render them.

answered Oct 5, 2018 at 13:16

Abhas Tandon

1,88916 silver badges26 bronze badges

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

1 Comment

Prashant Patil Over a year ago

Your answer works perfectly.. but as you said another approach to use React.components, I'm trying that way.. Thanks :)

Ivan Burnaev · Accepted Answer · 2018-10-05 13:02:06Z

1

If you are using React you don't have to mess with HTML stuff.
You can render your data by using React.Components. Below I created snippet to show how it can be done.

I hope it will help.

function allPlans()
{
    var all_plans = {
            'Stock Card Views' : {
                'free':{status:true,plantext:"5 Per Month"},
                'premium':{status:true,plantext:"Unlimited"},
                'vip':{status:true,plantext:"5 Per Month"}                            
            },
            'Portfolio Creation' : {
                'free':{status:true,plantext:"Unlimited"},
                'premium':{status:true,plantext:"Unlimited"},
                'vip':{status:true,plantext:"Unlimited"}                            
            },
            'Transactions In A Portfolio' : {
                'free':{status:true,plantext:"Unlimited"},
                'premium':{status:true,plantext:"Unlimited"},
                'vip':{status:true,plantext:"Unlimited"}                            
            },
            'Advance Filter':{
                'free':{status:true,plantext:"-"},
                'premium':{status:true,plantext:"Full Access"},
                'vip':{status:true,plantext:"Full Access"}                            
            },
            'Stock Card Requests' : {
                'free':{status:true,plantext:"-"},
                'premium':{status:true,plantext:"3 Per Month"},
                'vip':{status:true,plantext:"3 Per Month"}                            
            },
            'Premium Posrfolio Access' : {
                'free':{status:true,plantext:"-"},
                'premium':{status:true,plantext:"-"},
                'vip':{status:true,plantext:"1 Portfolio"}                            
            },
            'Investment Pick' : {
                'free':{status:true,plantext:"-"},
                'premium':{status:true,plantext:"-"},
                'vip':{status:true,plantext:"1 Per Month"}                            
            },
        }

    return all_plans;
}

const Column = ({data}) => (
  <ul>
    {data.map(option => (
      <li key={option.title}>
        {option.title}: {option.text}
      </li>
    ))}
  </ul>
)

const App = () => {
  const options = allPlans();
  const plansMap = Object.keys(options).reduce((acc, title) => {
    const plans = options[title];
    
    Object.keys(plans).forEach(plan => {
      if (!acc[plan]) {
        acc[plan] = [];
      }
    
      acc[plan].push({
        title,
        status: plans[plan].status,
        text: plans[plan].plantext
      })
    });
    
    return acc;
  }, {})
  
  return (
    <div>
      {Object.keys(plansMap).map(plan => (
        <div key={plan}>
          <h3>{plan}</h3>
          <Column data={plansMap[plan]} />
        </div>
      ))}
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector("#root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

answered Oct 5, 2018 at 13:02

Ivan Burnaev

2,73021 silver badges28 bronze badges

5 Comments

Ivan Burnaev Over a year ago

I didn't include styling stuff, but this question is not about it.

Prashant Patil Over a year ago

I tried your code by changing as per my requirement, but it showing records twice in each column.

Ivan Burnaev Over a year ago

Feel free to modify reduce function to get an appropriate data structure.

Prashant Patil Over a year ago

used map instead of reduce but still showing record twice. :(

Ivan Burnaev Over a year ago

@Prashant Patil, I am glad that it has helped.

Collectives™ on Stack Overflow

How to return html text variable in react and print as html?

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related