Axios returning jumble HTML with reactjs

Question

Im trying to get html from another file, set it to state and render to my web page using react. But when i render the result on the page it keeps on coming as jumble HTML (the html is showing as plain words).

After testing for hours it looks like the response comes in as a string, that's why its printing words, but how do i prevent that.

<script type="text/babel">
    class myClass extends React.Component {
        constructor() {
            super();
            this.state = {resultState: ""};
        };
        componentDidMount() {
            axios.post(`mysite.com/page.php`) //in this file it says <h1>green</h1>
            .then(res => {
                console.log(res.data);
                this.setState({ resultState: res.data });
            })
        }
        changeColor = () => {
            this.setState({resultState: <h1>blue</h1>});
        };
        render() {
            return (
                <div>
                {this.state.resultState}
                </div>
            )
         }
     }

     ReactDOM.render(<myClass />, document.getElementById('mydiv'))
</script>

It keeps on returning <h1>green</h1> instead of a large word "green". In the console it does show as html (the code is indented like the file)

ludwiguer · Accepted Answer · 2020-06-26 22:24:52Z

1

You need to use dangerouslySetInnerHTML in order to parse the HTML

return (
  <div dangerouslySetInnerHTML={{__html: this.state.resultState}} />
)

answered Jun 26, 2020 at 22:24

ludwiguer

2,2552 gold badges17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Denis Stukalov · Accepted Answer · 2020-06-26 22:25:48Z

0

You have two way: use dangerouslySetInnerHTML as the comment above or use npm library like html-to-react: https://www.npmjs.com/package/html-to-react

answered Jun 26, 2020 at 22:25

Denis Stukalov

1,2521 gold badge9 silver badges11 bronze badges

Comments

SomoKRoceS · Accepted Answer · 2020-06-26 22:29:22Z

0

<h1>green</h1> need to be encoded into <h1>green</h1>.

Then you will be able to just use:

render() {
            return (
                <div>
                {this.state.resultState}
                </div>
            )
         }

(You can encode your text by replacing HTML tag characters like > < / with str.replace())

answered Jun 26, 2020 at 22:29

SomoKRoceS

3,0733 gold badges24 silver badges33 bronze badges

Collectives™ on Stack Overflow

Axios returning jumble HTML with reactjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related