Why does my React component key return undefined when a number is passed as it's prop?-CodePudding

My goal is to have a grid of components, and save data about the state of every component on that grid, to achieve this I tried using an array of objects that would correspond to every component on the grid, that array is initialized as such:

let count = 0;
for(let i = 0; i < 15; i  ){
    for(let j = 0; j < 30; j  ){
      count  ;
      let x = 0;
      if(i % 2 !== 0){
        x = j * WIDTH_OF_CELL   OFFSET_X;
      } else {
        x = j * WIDTH_OF_CELL   OFFSET_X   24;
      }
      const y = i * HEIGHT_OF_CELL   OFFSET_Y;

      let cell = {
        y: y,
        x: x,
        centerX: x   25,
        centerY: y   25,
        state: 0,
        key: count
      }
      cellsGrid.push(cell);
    }
  }

And then to actualy render the components an itermediate component takes the cellsGrid array as a prop and maps every object to a cell component:

return (
    <div>
      {cellsGrid.map((item) => 
        <Cell 
        key={item.key} 
        postitX={item.x} 
        postitY={item.y} 
        edit={edit} 
        state={item.state} 
        handleClick={handleClick}>
        </Cell>
      )}
    </div>
)

The state property represents if a cell is on or off, it's initialized to 0, and when a cell is clicked it should be updated to 1, to do that a handleClick function is passed down to the cell component as a prop:

const handleClick = (event, state, key, callback) => {
    callback();
    let index = cellsGrid.findIndex(cell => cell.key === key);
    cellsGrid[index].state = state;
  };

Inside the cell component handleClick is passed values based on it's inner state, the key of the cell that was just clicked, along with it's state, since every cell component is created using the cellsGrid array, the key of a cell should correspond to the key of the array object that generated it:

onClick={event => handleClick(event, currentState.state, key, nextState)}

But when a cell is clicked the console throws an error:

Uncaught TypeError: Cannot set properties of undefined (setting 'state')

I tried logging the values of key and index inside the handleClick function:

const handleClick = (event, state, key, callback) => {
    callback();
    let index = cellsGrid.findIndex(cell => cell.key === key);
    //cellsGrid[index].state = state;
    console.log(key);
    console.log(index);
  };

Outputs:

undefined

-1

I don't understand why key is undefined, it's meant to be the same key as the object in the cellsGrid array, so I can find the object and update it's state. Sorry if the code looks rough, I'm new to React and javascript, any help would be much appreciated.

CodePudding user response：

Don't use key as a prop. Key is not passed as a prop. Key is used by react internally to help optimize rendering of the nodes You can pass index as a prop like

<MyComponent index={item.key}

props.index would have the value.