How HTML React only Unescape some code

Question

I have a some code

let red = 'red'
let blue = 'blue'
let formula = "1+2"
let answer = "3"
let string = "<span class="+red+">"+formula+"</span>"+"="+"<span class="+blue+">"+answer+"</span>"

111 In render's return

<div dangerouslySetInnerHTML={{__html: string]}} >

the above will show "1+23" with no color, however, I want 1+2=3 with red and blue classes created

UPDATE: I found should not be "className", should be "class" even this is in jsx, I still cannot get the equal being shown, in fact the class is from a string also

I think syntax are not correct. use this `let string = ''+formula+'='+answer+''` — Arvind, Jun 05 '17 at 11:11

score 1 · Answer 1 · answered Jun 05 '17 at 11:13

The problem is with the quotes in you HTML string, enclose the classes within single quotes like

class App extends React.Component {
    render() {
        let formula = "1+2"
        let answer = "3"
        let string = "<span className='red'>"+formula+"</span>"+"="+"<span className='blue'>"+answer+"</span>"
        return (
        <div dangerouslySetInnerHTML={{__html: string}} ></div>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

How HTML React only Unescape some code

1 Answers1