'I am displaying some content using dangerouslySetInnerHtml in Reactjs for a blog page, but bullet points are not showing

I am displaying some content using dangerouslySetInnerHtml in Reactjs for a blog page, but bullet points are not showing, however the same code and page is being used in another project and that is perfectly working fine. Unable to get whats the problem here i will be attaching the code. The renders fine, the only problem here is that it does not shows bullets for

tags. May be some alternative to dangerouslySetInnerHTMl can solve the problem for me.

Here is how my Content looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
<!--
@font-face {
  font-family: 'DuplicateIonic-Regular';
  src: url("") format("embedded-opentype");
  src: url("") format("opentype"), url("") format("woff"), url("") format("truetype"), url("") format("svg");
  font-weight: normal;
  font-style: normal; 
}
@font-face {
  font-family: 'DuplicateIonic-Medium';
  src: url("") format("embedded-opentype");
  src: url("") format("opentype"), url(""), url("") format("truetype"), url("") format("svg");
  font-weight: normal;
  font-style: normal; 
}
@font-face {
  font-family: 'DuplicateIonic-Bold';
  src: url("") format("embedded-opentype");
  src: url("") format("opentype"), url("") format("woff"), url("") format("truetype"), url("") format("svg");
  font-weight: normal;
  font-style: normal; 
}

body {
    padding-right: 8px;
    padding-left: 8px;
}

img {
    max-width: 100%;
}

.textbody {
    font-size: 15px;
    color: #6B6767;
    line-height: 130%;
    font-family: 'Helvetica', Arial, sans-serif;
}

.textbody hr {
    margin: 20px 0 30px 0;
    border: 0;
    border-top: 1px solid #ccc;
}

.textbody a {
    color: red;
}

.textbody h1,
.textbody h2,
.textbody h3,
.textbody h4 {
    color: #E2051B;
    font-size: 18px;
    font-family: BurlingamePro-Bold, Arial;
    margin: 0;
    line-height: 140%;
}

.textbody h1.grey,
.textbody h2.grey,
.textbody h3.grey,
.textbody h4.grey {
    color: #666;
}

.textbody h2 {
    font-size: 16px;
}

.textbody h2.dark {
    color: #555;
    font-size: 18px;
}

.textbody h2.dark-thin {
    color: #333;
    text-transform: uppercase;
    font-family: BurlingamePro-Bold, Arial;
    font-size: 20px;
    margin-bottom: 10px;
    line-height: 130%;
}

.textbody h2.pink {
    color: #F16A7C;
    text-transform: uppercase;
    font-family: BurlingamePro-Bold, Arial;
    font-size: 20px;
    margin-bottom: 10px;
    line-height: 130%;
}

.textbody p {
    margin-bottom: 25px;
}

.textbody table {
    width: 100%;
    border-collapse:collapse;
}

.textbody table,
.textbody th,
.textbody td {
    border: 1px solid #6B6767;
    padding: 3%;
    line-height: 120%;
    font-size: 15px;
}

.textbody a {
    color: #E2051B;
}

.textbody a.btn {
    color: #fff;
}

.textbody .special-info {
    border-top: 2px solid #ededed;
    border-bottom: 2px solid #ededed;
    padding: 20px 0;
    margin-bottom: 30px;
}

.textbody .special-info h2 {
    margin-bottom: 10px;
}

.textbody .caption {
    color: #666;
    display: block;
    text-align: center;
    font-style: italic;
}

.textbody .embed-video {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
    margin-bottom: 25px;
}

.textbody .embed-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.textbody ul,
.textbody ol {
    margin: 0;
    padding: 0 0 0 25px;
    text-align: left;
}

.textbody ul li,
.textbody ol li {
    margin-bottom: 10px;
}

.textbody ol {
    padding-left: 40px;
}

.textbody ol.no-indent {
    padding-left: 25px;
}

.textbody .qns {
    color: #E2051B;
    font-family: BurlingamePro-Bold, Arial;
    margin-bottom: 10px;
}

.textbody .ans {
    margin-bottom: 30px;
}

.textbody .no-margin li {
    margin: 0;
}

.textbody ol.alpha {
    list-style-type: lower-alpha;
}

.textbody .table-wrap {
    width: 100%;
    overflow-x: auto;
}

.textbody .bluebar {
    background-color: #0070b9;
}

.textbody .pinkbar {
    background-color: #ef4270;
}

.textbody section.border-bottom {
    border-bottom: 1px solid #ededed;
    padding-bottom: 25px;
    margin-bottom: 25px;
}

.textbody section.border-bottom.no-border {
    border: 0;
    padding-bottom: 0;
}

.textbody .height300 {
    height: 300px;
}

.textbody .height200 {
    height: 200px;
}

/* 12 Points Style */
.font30{font-size:30px;}
.offers-bg{background-image:url('https://www.frasersexperience.com/files/images/frx1212-bg2.jpg');}
.date-container{text-align:center;margin-bottom:35px;}
.date{
    display:inline-block;background-color:#F5C046;border:3px solid #000;padding:15px; 
    font-family:DuplicateIonic-Bold;color:#000;}
.deal-2column{margin-bottom:20px;}
.deal-img-wrap{display:inline-block;position:relative}
.tag{position:absolute;top:0;left:0;display:inline-block;width:42%;text-align:left}
.deal-2column{
    margin-left:0;
    margin-right:0;
}
/* End 12 Points Style */

*{
    box-sizing: border-box;
}

.text-right {
    text-align: right!important;
}

.text-center {
    text-align: center!important;
}

.row{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.col-1 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.order-first {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -webkit-box-ordinal-group: 14;
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
}

.order-1 {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

.order-2 {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
}

.order-3 {
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
  order: 3;
}

.order-4 {
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 4;
  order: 4;
}

.order-5 {
  -webkit-box-ordinal-group: 6;
  -ms-flex-order: 5;
  order: 5;
}

.order-6 {
  -webkit-box-ordinal-group: 7;
  -ms-flex-order: 6;
  order: 6;
}

.order-7 {
  -webkit-box-ordinal-group: 8;
  -ms-flex-order: 7;
  order: 7;
}

.order-8 {
  -webkit-box-ordinal-group: 9;
  -ms-flex-order: 8;
  order: 8;
}

.order-9 {
  -webkit-box-ordinal-group: 10;
  -ms-flex-order: 9;
  order: 9;
}

.order-10 {
  -webkit-box-ordinal-group: 11;
  -ms-flex-order: 10;
  order: 10;
}

.order-11 {
  -webkit-box-ordinal-group: 12;
  -ms-flex-order: 11;
  order: 11;
}

.order-12 {
  -webkit-box-ordinal-group: 13;
  -ms-flex-order: 12;
  order: 12;
}

.offset-1 {
  margin-left: 8.333333%;
}

.offset-2 {
  margin-left: 16.666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.333333%;
}

.offset-5 {
  margin-left: 41.666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.333333%;
}

.offset-8 {
  margin-left: 66.666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.333333%;
}

.offset-11 {
  margin-left: 91.666667%;
}

.flex-row {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}

.flex-column {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.flex-row-reverse {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: reverse !important;
  -ms-flex-direction: row-reverse !important;
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: reverse !important;
  -ms-flex-direction: column-reverse !important;
  flex-direction: column-reverse !important;
}

.flex-wrap {
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}

.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  -ms-flex-wrap: wrap-reverse !important;
  flex-wrap: wrap-reverse !important;
}

.justify-content-start {
  -webkit-box-pack: start !important;
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

.justify-content-end {
  -webkit-box-pack: end !important;
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}

.justify-content-center {
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.justify-content-between {
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

.justify-content-around {
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
}

.align-items-start {
  -webkit-box-align: start !important;
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}

.align-items-end {
  -webkit-box-align: end !important;
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}

.align-items-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.align-items-baseline {
  -webkit-box-align: baseline !important;
  -ms-flex-align: baseline !important;
  align-items: baseline !important;
}

.align-items-stretch {
  -webkit-box-align: stretch !important;
  -ms-flex-align: stretch !important;
  align-items: stretch !important;
}

.align-content-start {
  -ms-flex-line-pack: start !important;
  align-content: flex-start !important;
}

.align-content-end {
  -ms-flex-line-pack: end !important;
  align-content: flex-end !important;
}

.align-content-center {
  -ms-flex-line-pack: center !important;
  align-content: center !important;
}

.align-content-between {
  -ms-flex-line-pack: justify !important;
  align-content: space-between !important;
}

.align-content-around {
  -ms-flex-line-pack: distribute !important;
  align-content: space-around !important;
}

.align-content-stretch {
  -ms-flex-line-pack: stretch !important;
  align-content: stretch !important;
}

.align-self-auto {
  -ms-flex-item-align: auto !important;
  align-self: auto !important;
}

.align-self-start {
  -ms-flex-item-align: start !important;
  align-self: flex-start !important;
}

.align-self-end {
  -ms-flex-item-align: end !important;
  align-self: flex-end !important;
}

.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}

.align-self-baseline {
  -ms-flex-item-align: baseline !important;
  align-self: baseline !important;
}

.align-self-stretch {
  -ms-flex-item-align: stretch !important;
  align-self: stretch !important;
}

.mm-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.mm-list .item {
  width: 49%;
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 2px;
  text-align: center;
  height: 250px;
  position: relative;
}
.mm-list .item .tag {
  position: absolute;
  top: 10px;
  left: 0;
  background-color: #E2051B;
  color: #fff;
  padding: 5px 10px;
  font-family: BurlingamePro-Bold, serif;
  font-size: 14px;
}
.mm-list .item .thumb {
  position: relative;
}
.mm-list .item .thumb img {
  height: 150px;
  width: 100%;
  object-fit: cover;
}
.mm-list .item .thumb .promo {
  background-color: #FFCC00;
  position: absolute;
  bottom: 0;
  width: 100%;
  font-family: BurlingamePro-Bold, serif;
  padding: 5px 0;
  color: #000;
}
.mm-list .item .thumb .promo .text {
  font-size: 12px;
}
.mm-list .item .thumb .promo .code {
  font-size: 15px;
}
.mm-list .item .storename {
  color: #E2051B;
  font-family: BurlingamePro-Bold, serif;
  margin-top: 10px;
}
.mm-list .item .mall {
  color: #666;
  font-size: 12px;
  font-family: BurlingamePro-Bold, Arial;
  line-height: 130%;
  display: table;
  height: 55px;
  width: 100%;
}
.mm-list .item .mall .text {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.mm-list .item {
    width: 32%;
}
.noapp{
    display:none
}
-->
</style>

<script>
function sendToApp(obj){
    var data = JSON.stringify(obj);
    postMessage(data);
}
</script>

</head>

<body bgcolor='#eaeaea'><div class="textbody"><p>
    Love to shop? It&rsquo;s time you got rewarded for it!<br />
    <br />
    <br />
    <br />
    </p>
<p>
    <img alt="" src="" style="; ;" /></p>
<p>
    !</p>
<div>
    <span style="color:#f00;"><strong>TERMS AND CONDITIONS</strong></span></div>
<div>
    &nbsp;</div>
<ul>
    <li>
        </li>
    <li>
        </li>
    <li>
        </li>
    <li>
        </li>
    <li>
        </li>
    <li>
        </li>
    <li>
    </li>
    <li>
        </li>
    <li>
        </li>
    <li>
        </li>
    <li>
        </li>
    <li>
        </li>
    <li>
        </li>
    <li>
        </li>
</ul>
</div></body>

</html>

Here is how i am trying to display this:

 <div style={{ paddingLeft: scale(11), paddingRight: scale(11) }}>
                    <div
                        dangerouslySetInnerHTML={{
                            __html: this.state.content
                        }}></div>
                </div>

Solution 1:^[1]

I removed ul tags and it worked with me


  
     <li> Developed bare react native, cross-platform user-facing taxi app for delivery and ride
      sharing
      </li>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Avinash Aryan

'I am displaying some content using dangerouslySetInnerHtml in Reactjs for a blog page, but bullet points are not showing

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]