How to display HTML from an array in ReactJS

Question

I am new to ReactJS and I have a problem with my app. I have an array:

players: [
    { number: 1, name: "Ben Blocker", position: "G" },
    { number: 2, name: "Dave Defender", position: "D" },
    { number: 3, name: "Sam Sweeper", position: "D" },
    { number: 4, name: "Matt Midfielder", position: "M" },
    { number: 5, name: "William Winger", position: "M" },
    { number: 6, name: "Fillipe Forward", position: "F" },
    { number: 7, name: "Bobby Ristov", position: "<h1>Test</h1>" }
  ],

And I would like to display the the H1 as HTML instead of text. I have tried it like this <h1>Hi there!</h1> but that does not work either. Am I missing something here? Any help would be appriciated.

Check this, might help: https://stackoverflow.com/questions/39758136/render-html-string-as-real-html-in-a-react-component — G4bri3l, Jul 22 '17 at 17:16

score 0 · Accepted Answer · answered Jul 22 '17 at 17:13

0

It should an element, not string:

position: <h1>Test</h1>

answered Jul 22 '17 at 17:13

hjrshng

1,675
3
17
30

You can't set that as a value in an object field, it's not valid `js` – G4bri3l Jul 22 '17 at 17:16
@G4bri3l Did you read the JSX documentation ? https://facebook.github.io/react/docs/introducing-jsx.html – hjrshng Jul 22 '17 at 17:17
@Ha Ja Thank you for your answer. But now I get this: 'React' must be in scope when using JSX react/react-in-jsx-scope – Bobby Jul 22 '17 at 17:21
Yes, you have to import the React module in your file before using jsx. – hjrshng Jul 22 '17 at 17:22

How to display HTML from an array in ReactJS

1 Answers1