Need help with Non-unique items in a list


(React.js Teacher) #1

I am working on a Tetris game in React.

The first thing is creation of the “glass” grid.

I want to represent the grid by a React component/element.

So I created the following:

A “Square” element is just a box in the grid, that can be either turned on or off (solid or empty space):

function Square(props) { return <div>{props.value}</div> }

Here is the “glass” component, which is the entire tetris “grid”:

function Glass(props) { let numbers = props.numbers; return (<div style = {cssFilledSquare}>{
    numbers.map((number) => <Square key = { number.toString() } value = {number} />)
}</div>) }

And here is how I render it:

let numbers = [0,1,0,1,0,1,0,1];
ReactDOM.render(<Glass numbers={numbers} />, root);

I know this is probably not the right way of making this in the first place, but that’s the question: What is?

How would you approach rendering a list (or a grid) of elements representing the same component, except with different states (solid color or empty)?