dimanche 28 juin 2020

React : Print multiple Instance of one class using another class

I'm a React beginner. I'm trying to make a board game(Ludo) that will need 13*13 boxes. I have one box class that print out one square button and rendering it works fine. Code below:

class Box extends React.Component{
  render(){
    return(
      <button className="square">
        
      </button>
    );
    
  }
}

Problem is when I try to print multiple Box with the Board class. Apparently this code does not work. I can't figure out why. Any insight will be helpful.

class Board extends React.Component{
  render(){
    return(
      {this.renderRow}
    );
  }
  renderRow(){
    for(let i= 0; i < 13; i++){
      return(
        <Box />
      );
    }
  }
}

Thanks in advance

Upadate : it seems like even the box is not working. Only when I comment out Board class the Box class works.

Update 2 : changing from {this.renderRow} to (this.renderRow) inside Board:render solved the issue where even Box class won't render(as mentioned in update 1). new code is :

class Board extends React.Component{
  render(){
    return(
      (this.renderRow)
    );
  }
  renderRow(){
    return(
        <Box />
    );
  }
}




Aucun commentaire:

Enregistrer un commentaire