DangerouslySetInnerHtml() showing content from previous page in React

Question

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}} />
    )
}

Answer 1

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.