CODEWITHSUNDEEP
javascripthtmlreactjsfirebase
hello world
hello world

Reputation: 1755

reactjs html rendering as string not html

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

Upvotes: 0

Views: 78

Answers (3)

Matt Carlotta
Matt Carlotta

Reputation: 19762

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

Upvotes: 1

Ronnie Smith
Ronnie Smith

Reputation: 18565

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.

Upvotes: 0

dp2050
dp2050

Reputation: 342

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

If it is an option, you may try this 

 IDwrapper.innerHTML = content;

Upvotes: 0

Related Questions