Rendering an array of objects in react

Question

Im new to react so im not sure whats going wrong here... Im trying to create a 3x3 structure of input boxes. This is what i came up with

function Square(prop){
    return (<input type = 'text' class='w-25'  style="display:inline-block">${prop.key}</input>);
}

function Row(props){
    const row =[];
    for( let i=props.key*3;i<(props.key+3);i++){
        row.push(<Square key ={i}/>);
    }
    return (row);
}

class Box extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            squares: Array(9).fill(null),
            xIsNext: true,
        };
    }
    render(){
        let board =[];
        for( let i=0; i<3;i++){
            board.push(<div><Row key={i} /></div>);
        } 
        return (board);
    }
} 
ReactDOM.render(
    <Box />,
    document.getElementById('root')
  );

But I am getting the error

Warning: Each child in an array or iterator should have a unique "key" prop.

As far as my Dom goes the 3 rows have been rendered as

Any help would be greatly appreciated

UPDATE

After trying out some answers given below I've ended up with a single row of 4 input boxes... although I've only specified 3 in the loop. Why is this can some one explain and I've specified 2 more rows.This is the new code

function Square(prop){
    return (<input type = 'text' id={prop.value} value={'x'}></input>);
}

function Row(props){
    const row =[];
    for( let i=props.value*3;i<(props.value+3);i++){
        const val = `${i}input`;
        const key = `${i}square`;
        row.push(<Square key ={key} value={val}/>);

    }
    return (row);
}

class Box extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            squares: Array(9).fill(null),
            xIsNext: true,
        };
    }
    render(){
        let board =[];
        for( let i=0; i<3;i++){
            const key = `${i}row`;
            board.push( <Row  key={key} value={i}/>);
            console.log(i)
        } 
        return (board);
    }
} 
ReactDOM.render(
    <Box />,
    document.getElementById('root')
  );

for( let i=props.key*3;i<(props.key+3);i++) Are you sure this is working? — omri_saadon
– omri_saadon, Commented Nov 1, 2018 at 14:40

iofjuupasli · Accepted Answer · 2018-11-01 14:40:04Z

2

Here you need to move key property:

board.push(<div key={i}><Row /></div>);

Because key should be in the outside element of each element in array

answered Nov 1, 2018 at 14:40

iofjuupasli

3,8831 gold badge19 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

omri_saadon · Accepted Answer · 2018-11-02 08:42:57Z

0

The key prop should be on the first element of the iteration which is the div element:

board.push(<div key={i}><Row /></div>);

Also note that this row for( let i=props.key*3;i<(props.key+3);i++) might not work for you as there is not more key prop.

You can change it to: for( let i=0;i<3;i++)

Notice that it is an Anti-Pattern to use index as a key.

a key is the only thing React uses to identify DOM elements. What happens if you push an item to the list or remove something in the middle? If the key is same as before React assumes that the DOM element represents the same component as before. But that is no longer true.

Took from This medium - Index as a key is an anti-pattern

EDIT:

Added a sample code that should run for you.

Notice I've removed the Row component as it seem redundant.

I didn't understood why you need two for loops? Do you need 9 inputs or 3 inputs?

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Square(props) {
  return (<input type='text' id={props.key} value={props.value}></input>);
}

class Box extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
      xIsNext: true,
    };
  }
  render() {
    let board = [];
    for (let i = 0; i < 3; i++) {
      const key = `${i}row`;
      board.push(<Square key={key} value={i} />);
      console.log(i)
    }
    return (board);
  }
}
ReactDOM.render(
  <Box />,
  document.getElementById('root')
);

edited Nov 2, 2018 at 8:42

answered Nov 1, 2018 at 14:42

omri_saadon

10.7k8 gold badges36 silver badges58 bronze badges

4 Comments

Akshay Kishore Over a year ago

Thanks but now im getting a single row of 4 input boxes. Note why am i getting 4 when ive specified only 3 in the loop.also a single row ???

Akshay Kishore Over a year ago

Apparently I have 3 input-boxes from first row and 1 input- box from second row

omri_saadon Over a year ago

@AkshayKishore , I've added an Edit section to my answer.

omri_saadon Over a year ago

@AkshayKishore , It's ok, No worries. Good luck friend :)

Bhojendra Rauniyar · Accepted Answer · 2018-11-01 14:46:25Z

0

You should use key in parent element ie. div in your example:

for( let i=0; i<3;i++){
  board.push(<div key={i}><Row /></div>);
}

BTW, you may simply use:

for( let i=0; i<3;i++){
  board.push(<Row key={i} />);
}

Best practice is to use some string rather than assigning number value so it will not conflict with other key of element:

for( let i=0; i<3;i++){
  board.push(<Row key={'row-'+i} />);
}

edited Nov 1, 2018 at 14:46

answered Nov 1, 2018 at 14:41

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Collectives™ on Stack Overflow

Rendering an array of objects in react

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related