CODEWITHSUNDEEP
reactjsjsx
stone rock
stone rock

Reputation: 1953

Getting error ValidateDOMNesting in reactjs how to fix it?

I am getting error in my console:
Below is the code of content.js which displays everything clearly but will the warning give any problem on rendering when my web app becomes complex. Screenshot: enter image description here

content.js file :

class Content extends Component {
    constructor(props){
        super(props);
        this.state = {
            matches:[],
            loading:true
        };
    }

    componentDidMount(){
        fetch('api/matches')
        .then(res => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        matches:res,
        loading:false
      })
    })
    }

    render() {
        if (this.state.loading) {
            return <div>>Loading...</div>
        }

    return (
      <div>
          <div class="row">

            <div class="col-lg-3">
                <div id="one">
                    <p class="match">Match {this.state.matches[0].id}</p>
                    <p><h4>{this.state.matches[0].team1}</h4></p>
                    <p>VS</p>
                    <p><h4>{this.state.matches[0].team2}</h4></p>                  <====  LINE   39
                    <div class="winner">
                        <h3>Winner</h3>
                        <h4>{this.state.matches[0].winner}</h4>
                    </div>
                    <div class="stats">
                    <button type="button" class="btn btn-primary">View Stats</button>
                    </div>
                </div>
            </div>
          </div>
      </div>
    );
  }
}

export default Content;

Upvotes: 0

Views: 832

Answers (1)

simbathesailor
simbathesailor

Reputation: 3687

According to this document document.Either you remove h4 tag or remove p tag outside it.

<p className="your_class">{this.state.matches[0].team1}</p>

or you can do it like this

<h4>{this.state.matches[0].team1}</h4>

Upvotes: 1

Related Questions