In a parent component I am populating a 2D array with a bunch of functional components. However, because I am putting it into an array, each element needs a unique key. What is best practice for doing this with stateless functional components?
var dim = this.props.dim;
var cells = [];
for (var i = 0; i < dim; i++) {
var row = [];
for (var j = 0; j < dim; j++) {
row.push(Cell({dim:10, isAlive:this.state.matrix[i][j].isAlive}))
}
cells.push(row);
};
You are not using your functional component (Cell) as a functional component. You aren't suppose to call them like functions. You are supposed to render them using React.
You can use JSX syntax:
var dim = this.props.dim;
var cells = [];
for (var i = 0; i < dim; i++) {
var row = [];
for (var j = 0; j < dim; j++) {
row.push(<Cell key={`${i}-${j}`} dim={10}, isAlive={this.state.matrix[i][j].isAlive> />);
}
cells.push(row);
};
Or you can use React API
var dim = this.props.dim;
var cells = [];
for (var i = 0; i < dim; i++) {
var row = [];
for (var j = 0; j < dim; j++) {
row.push(React.createElement(Cell, {key:`${i}-${j}`, dim:10, isAlive:this.state.matrix[i][j].isAlive}, null);
}
cells.push(row);
};
Both those forms allow you to pass in the key property and allow React to consume it.
You could add the index of that element, which is given by index = i * dim + j. This way it's unique for all items and consecutive.
here is an example that you should be able to work with:
// parent
const arr = ['i', 'like', 'cats']
const arrWithKeys = arr.map((item, i) => ({ key: i, item }))
console.log(arrWithKeys)
// child
arrWithKeys.forEach((thing) => console.log(`<Something key={${thing.key}} item={${thing.item}} />`))pass arrWithKeys into the child like this:
<Component arrWithKeys={arrWithKeys} />
and access it inside the component as this.props.arrWithKeys
use jsx syntax only:
class mat extend Component{
render(){
return <div>
{this.state.matrixCell.map((row, i)=>row.map((col, k)<Cell key={i*dim+k} dim={10} isAlive = {col.isAlive}))}
</div>;
}
}
