CODEWITHSUNDEEP
javascripthtmlreactjs
amimaro
amimaro

Reputation: 303

Pass prop through div

I am trying to make a div board with reactjs. In order to locate the elements on the board I want to pass props like row and column id. 

componentDidMount() {
  let board = [];
  for(let i = 0; i < 30; i++){
    for(let j = 0; j < 50; j++){
      board.push(<div className={"board-element"} row={i} col={j}></div>);
    }
  }
  this.setState({elements: board});
}

The for loop creates a list of elements and when finished it change the state and set the list to the main div.

render() {
  return (
    <div className="board center-div">
      {this.state.elements} // HERE
    </div>
  );
}

But if I inspect the rendered html the row and col are missing.

<div class="board-element"></div>

And on the console there is a warning:

Warning: Unknown props `row`, `col` on <div> tag. Remove these props from the element. For details, see ...

Upvotes: 0

Views: 658

Answers (2)

Geuis
Geuis

Reputation: 42277

Change row and col to data-row and data-col.

Upvotes: 1

Andreyco
Andreyco

Reputation: 22872

Why not to render directly, without storing elements in state?

function Board() {
    let board = [];
    for(let i = 0; i < 30; i++){
        for(let j = 0; j < 50; j++){
            board.push(<div key={`${i}-${j}`} className={"board-element"}>{i}{j}</div>);
        }
    }

    return (
        <div className="board center-div">
            {board}
        </div>
    )
}   



ReactDOM.render(
  <Board name="World" />,
  document.getElementById('container')
);

Working example

Upvotes: 1

Related Questions