CODEWITHSUNDEEP
htmlreactjs
Stretch0
Stretch0

Reputation: 9251

DangerouslySetInnerHtml() showing content from previous page in React

Building a site which shows users profiles. When changing from one profile to another, the profile description is getting stuck with the previous users profile data.

For example

  1. Visit users profile 1
  2. Users profile description reads User profile 1 description
  3. Visit users profile 2
  4. Users profile description reads User profile 1 description User profile 2 description

My code is all being run in the render function of my component so should be rerendering when state updates.

render(){
    return(
        <h4>Profile 1<h4>
        <p dangerouslySetInnerHTML={{__html: this.props.profile.description}} />
    )
}

Upvotes: 1

Views: 517

Answers (1)

Stretch0
Stretch0

Reputation: 9251

Turns out this.props.profile.description was HTML wrapped in <p> tags. This was causing p tags to be nested within p tags which causes issues as described in this post - Nesting <p> won't work while nesting <div> will?

Rule of thumb is never use dangerouslySetInnerHTML on a <p> tag.

Took me a long time to get to the root cause of this and thought it was worth passing it on.

Upvotes: 1

Related Questions