reactjs html rendering as string not html

Question

Trying to render html but I'm getting strings

var ref = firebase.database().ref('raffle/');
ref.on('value', (snapshot) => {
  var content = ``;
  var IDwrapper = document.getElementById('raffleFeed');

  snapshot.forEach((data) => {
    // var rImage = data.val().raffleImage;
    var rTitle = data.val().raffleTitle;
    var rAmount = data.val().raffleAmount;
    var rDescription = data.val().raffleDescription;
    var rEntries = data.val().raffleEntries;
    var rButton = '<button class="btn btn-secondary"> Button </button>';

    console.log(data.val());
    // content += '<Row>';
    content += '<Col sm="4">';
    content += '<CardBody>';

    content += '<CardTitle>' + rTitle + '</CardTitle>';
    content += '<CardText>' + rAmount + '</CardText>';
    content += '<CardText>' + rEntries + '</CardText>';
    content += '<CardText>' + rDescription + '</CardText>';
    content += rButton;

    content += '</CardBody>';
    content += '</Col>';
    // content += '</Row>'; //end
  });

  IDwrapper.append(content);

the following is rendered

<Col sm="4"><CardBody><CardTitle>1</CardTitle><CardText>1</CardText><CardText>1</CardText><CardText>1</CardText><button class="btn btn-secondary"> Button </button></CardBody></Col><Col sm="4"><CardBody><CardTitle>2</CardTitle><CardText>2</CardText><CardText>2</CardText><CardText>2</CardText><button class="btn btn-secondary"> Button </button></CardBody></Col><Col sm="4"><CardBody><CardTitle>3</CardTitle><CardText>3</CardText><CardText>3</CardText><CardText>3</CardText><button class="btn btn-secondary"> Button </button></CardBody></Col><Col sm="4"><CardBody><CardTitle>4</CardTitle><CardText>4</CardText><CardText>4</CardText><CardText>4</CardText><button class="btn btn-secondary"> Button </button></CardBody></Col><Col sm="4"><CardBody><CardTitle>5</CardTitle><CardText>5</CardText><CardText>5</CardText><CardText>5</CardText><button class="btn btn-secondary"> Button </button></CardBody></Col>

not sure what I'm overlooking but its driving me insane. thanks for the help

This seems to be achievable easily using react only, your HTML can be rendred using jsx — Just code
– Just code, Commented Oct 23, 2018 at 4:17
just trying to loop thru my firebase database and render the values to the view @Justcode — hello world
– hello world, Commented Oct 23, 2018 at 4:21

Matt Carlotta · Accepted Answer · 2018-11-28 18:53:03Z

You can push your JSX into an array, or use a React Fragment, or worst case scenario, use dangerouslySetInnerHtml.

Here's a simple example of using mixed array content (strings plus JSX): https://codesandbox.io/s/1v1xmq1kmq

Same example as above, however, instead of using an array, just wrapping the content within a Fragment: https://codesandbox.io/s/92r12m7zp

Here's a more complex example using a chunked array (change the columns to a number that divides into 24 evenly): https://codesandbox.io/s/30v7qvoz3m

Example of using an array:

const content = [];

snapshot.forEach((data) => {
  const rTitle = data.val().raffleTitle;
  const rAmount = data.val().raffleAmount;
  const rDescription = data.val().raffleDescription;
  const rEntries = data.val().raffleEntries;
  const rButton = <button class="btn btn-secondary"> Button </button>

  const jsxContent = (
    <Row key={rTitle}>
      <Col sm="4">
        <CardBody>
          <CardTitle> { rTitle }</CardTitle>
           ...etc
        <CardBody>
      </Col>
    </Row>
  )

  content.push(jsxContent);
});

Then in your React component:

<div>
 {content}
</div>

Usually the database will store a JSON array of raffle ticket data like so:

[ 
  { 
    id: xxxx-xxxx-xxxx-xxx (unique uuid), 
    title: "Example Raffle Title", 
    amount: 10.00, 
    description: "Example raffle description", 
    entries: 49, 
    maxEntries: 500 
  }, 
  { 
    id: xxxx-xxxx-xxxx-xxx,
    title: "Example Raffle Title 2",  
    ...etc 
  }, 
  {
    ...etc
  } 
]

Then you'll retrieve this JSON array from your database, map over the array, display each item, and apply a unique id to an element's onClick handler (click on one of the tickets to retrieve the id, which then can be used to charge the customer, update the database entries, ...etc).

Working example: https://codesandbox.io/s/8446420yn2

is this the traditional react way of displaying database nodes to your view?

dp2050 · Accepted Answer · 2018-10-23 04:08:50Z

0

content is just a string, but you need a node.

If it is an option, you may try this

 IDwrapper.innerHTML = content;

answered Oct 23, 2018 at 4:08

dp2050

3403 silver badges8 bronze badges

2 Comments

hello world Over a year ago

so how would i append but render the HTML tags with my object variables values?

dp2050 Over a year ago

If you are using REACT.JS, you need to return() all that through reacts render()` instead of directly appending to DOM. Everything you want to be reactive, must go through react.

Ronnie Smith · Accepted Answer · 2018-10-23 04:27:39Z

0

create an object var cardValues = {} and assign the various snapshot values to this object, e.g. cardValues.title = snapshot.val().title. Then, pass this object to a card builder function that uses document.createElement and .appendChild methods to render out your cards.

answered Oct 23, 2018 at 4:27

Ronnie Smith

18.8k7 gold badges89 silver badges99 bronze badges

Collectives™ on Stack Overflow

reactjs html rendering as string not html

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related