How to render the html elements with inline styles in the json file to the react-dom?

Question

I have a json file with properties and i want to access its html properties which are along with inline styles like this:

one property in json file was

"html": "<li class=\"element-item singlechoice\">\n<p><a href=\"#\"><div><i class=\"material-icons\">question_answer</i>1)</div> <div>What is meant by 5 A? </div></a></p>\n<p> </p><div>A)</div><div><span><input id=\"q_opt_703193\" name=\"q_opt\" onclick=\"checkSingleQus('703193','1')\" type=\"radio\" value=\"\"/></span> A charge of 5 C flows through a point in 1 second       <span class=\"ansblock\"> <i class=\"material-icons\" id=\"ansright_703193\" style=\"display:none;color:green;font-size: 22px; font-weight: bolder;  margin-bottom: 2px;\">done</i>\n<i class=\"material-icons\" id=\"answrong_703193\" style=\"display:none;color:red; font-size: 22px; font-weight: bolder; margin-bottom: 2px;\">clear</i> </span>\n</div>\n<p> </p><div>B)</div><div><span><input id=\"q_opt_703194\" name=\"q_opt\" onclick=\"checkSingleQus('703194','0')\" type=\"radio\" value=\"\"/></span> 5 V electricity flows across \\[1\\Omega \\] of resistance       <span class=\"ansblock\"> <i class=\"material-icons\" id=\"ansright_703194\" style=\"display:none;color:green;font-size: 22px; font-weight: bolder;  margin-bottom: 2px;\">done</i>\n<i class=\"material-icons\" id=\"answrong_703194\" style=\"display:none;color:red; font-size: 22px; font-weight: bolder; margin-bottom: 2px;\">clear</i> </span>\n</div>\n<p> </p><div>C)</div><div><span><input id=\"q_opt_703195\" name=\"q_opt\" onclick=\"checkSingleQus('703195','0')\" type=\"radio\" value=\"\"/></span> 5V electricity is causing 1 C of charge to flow       <span class=\"ansblock\"> <i class=\"material-icons\" id=\"ansright_703195\" style=\"display:none;color:green;font-size: 22px; font-weight: bolder;  margin-bottom: 2px;\">done</i>\n<i class=\"material-icons\" id=\"answrong_703195\" style=\"display:none;color:red; font-size: 22px; font-weight: bolder; margin-bottom: 2px;\">clear</i> </span>\n</div>\n<p> </p><div>D)</div><div><span><input id=\"q_opt_703196\" name=\"q_opt\" onclick=\"checkSingleQus('703196','0')\" type=\"radio\" value=\"\"/></span> A charge of 5 C flows through a point in 5 seconds.       <span class=\"ansblock\"> <i class=\"material-icons\" id=\"ansright_703196\" style=\"display:none;color:green;font-size: 22px; font-weight: bolder;  margin-bottom: 2px;\">done</i>\n<i class=\"material-icons\" id=\"answrong_703196\" style=\"display:none;color:red; font-size: 22px; font-weight: bolder; margin-bottom: 2px;\">clear</i> </span>\n</div>\n<!--Added _q to show question id on next page-->\n<span class=\"pull-right view_ans\"><a href=\"https://www.testsite.com/question-bank/electricity_q1/2140/202582\" target=\"_blank\">View Solution <i class=\"material-icons\">play_arrow</i> </a></span>\n</li>",

i am trying to access this property using

data.map((item) => (<div dangerouslySetInnerHTML={{__html:item.html}}></div>))

Its giving the html contents perfectly but does not apply the styles what should i do?

Answer 1

The inline css works already, only the property is set as none like this display:none. Working html property is below,

"html": "<li class=\"element-item singlechoice\">\n<p><a href=\"#\"><div><i class=\"material-icons\">question_answer</i>1)</div> <div>What is meant by 5 A? </div></a></p>\n<p> </p><div>A)</div><div><span><input id=\"q_opt_703193\" name=\"q_opt\" onclick=\"checkSingleQus('703193','1')\" type=\"radio\" value=\"\"/></span> A charge of 5 C flows through a point in 1 second <span class=\"ansblock\"> <i class=\"material-icons\" id=\"ansright_703193\" style=\"display:block;color:green;font-size: 22px; font-weight: bolder; margin-bottom: 2px;\">done</i>\n<i class=\"material-icons\" id=\"answrong_703193\" style=\"display:block;color:red; font-size: 22px; font-weight: bolder; margin-bottom: 2px;\">clear</i> </span>\n</div>\n<p> </p><div>B)</div><div><span><input id=\"q_opt_703194\" name=\"q_opt\" onclick=\"checkSingleQus('703194','0')\" type=\"radio\" value=\"\"/></span> 5 V electricity flows across \\[1\\Omega \\] of resistance <span class=\"ansblock\"> <i class=\"material-icons\" id=\"ansright_703194\" style=\"display:block;color:green;font-size: 22px; font-weight: bolder; margin-bottom: 2px;\">done</i>\n<i class=\"material-icons\" id=\"answrong_703194\" style=\"display:block;color:red; font-size: 22px; font-weight: bolder; margin-bottom: 2px;\">clear</i> </span>\n</div>\n<p> </p><div>C)</div><div><span><input id=\"q_opt_703195\" name=\"q_opt\" onclick=\"checkSingleQus('703195','0')\" type=\"radio\" value=\"\"/></span> 5V electricity is causing 1 C of charge to flow <span class=\"ansblock\"> <i class=\"material-icons\" id=\"ansright_703195\" style=\"display:block;color:green;font-size: 22px; font-weight: bolder; margin-bottom: 2px;\">done</i>\n<i class=\"material-icons\" id=\"answrong_703195\" style=\"display:block;color:red; font-size: 22px; font-weight: bolder; margin-bottom: 2px;\">clear</i> </span>\n</div>\n<p> </p><div>D)</div><div><span><input id=\"q_opt_703196\" name=\"q_opt\" onclick=\"checkSingleQus('703196','0')\" type=\"radio\" value=\"\"/></span> A charge of 5 C flows through a point in 5 seconds. <span class=\"ansblock\"> <i class=\"material-icons\" id=\"ansright_703196\" style=\"display:block;color:green;font-size: 22px; font-weight: bolder; margin-bottom: 2px;\">done</i>\n<i class=\"material-icons\" id=\"answrong_703196\" style=\"display:block;color:red; font-size: 22px; font-weight: bolder; margin-bottom: 2px;\">clear</i> </span>\n</div>\n<!--Added _q to show question id on next page-->\n<span class=\"pull-right view_ans\"><a href=\"https://www.testsite.com/question-bank/electricity_q1/2140/202582\" target=\"_blank\">View Solution <i class=\"material-icons\">play_arrow</i> </a></span>\n</li>"