creating a grid in reactjs

Question

I need an explanation to as what has been done in the gridFull state of this constructor.Being new to javascript, I couldn't get this line of code.

constructor() {
        super();
        this.speed = 100;
        this.rows = 30;
        this.cols = 50;

        this.state = {
            generation: 0,
            gridFull: Array(this.rows).fill().map(() => Array(this.cols).fill(false))// this line of code is unclear to me
        }

Where did you get this code? What is the context / what is it supposed to be doing? — tommymcdonald
– tommymcdonald, Commented Jan 24, 2018 at 19:52
Which part of the code don't you understand? Have you tried Googling each of the various methods such as .fill() and .map() individually? — Obsidian Age
– Obsidian Age, Commented Jan 24, 2018 at 19:53
i got this code from github.com/beaucarnes/fcc-project-tutorials/tree/master/… — jammy
– jammy, Commented Jan 24, 2018 at 19:53
i understand what .fill and .map does does in javascript but I am quite puzzled at how they have been used together alongwith an arrow function. — jammy
– jammy, Commented Jan 24, 2018 at 19:57
@satyajeetjha Note how the answer breaks the line of code you are asking about into small pieces. Descriptions for each of these pieces can be found with some research, usually starting with Google. Breaking things into smaller pieces like this is a critical skill as you continue your journey to learn about programming. Good luck! — Code-Apprentice
– Code-Apprentice, Commented Jan 24, 2018 at 20:00

Sergio Moura · Accepted Answer · 2018-01-24 20:17:33Z

1

Let's break down the line:

Array(this.rows)

this creates an array with this.rows many rows. In this case, 30.

.fill()

fills the array with undefined values (more info on fill function)

.map(callbackFunction)

this returns a new array with each value being transformed by the function. Since you have an array of undefined, you'll call the function as you would the following callbackFunction(undefined).

Now for the callback function:

() => Array(this.cols).fill(false);

This function takes no parameters (hence ()), and returns an Array with this.cols size (which is 50), all containing false.

tl;dr: So, you're essentially creating a 30x50 matrix filled with false on each element.

EDIT:

explaining arrow functions:

(list-of-parameters) => (function block | return value)

To explain using examples, we can transform function one() { return 1; } into () => 1;.

Or function times(a, b) { return a * b;} into (a, b) => a * b;

Or another:

let x = 0;
function foo(y) {
  const returnValue = (x++) * y;
  return returnValue;
}

to

let x = 0;
const foo = (y) => {
  const returnValue = (x++) * y;
  return returnValue;
}

EDIT2:

More ways to accomplish the same result:

let result = Array(rowCount).fill();
for (let i = 0; I < rowCount; i++) {
  result[i] = Array(colCount).fill(false);
}

Another:

const line = Array(colCount).fill(false);
const result = Array(rowCount).fill().map(() => [...line]);

And another:

const line = Array(colCount).fill(false);
const result = [];
for (let idx = 0; idx < rowCount; idx++) {
  result.push([...line]);
}

Or you can create your own "matrix creator":

function matrix(row, col) {
  const data = Array(row * col).fill(false);

  const findIdx = (x, y) => y * col + x;

  return {
    get: (x, y) => data[findIdx(x,y)],
    set: (x, y, value) => {
      data[findIdx(x,y)] = value
      return data[findIdx(x,y);
    },
  };
}

edited Jan 24, 2018 at 20:17

answered Jan 24, 2018 at 19:56

Sergio Moura

4,9321 gold badge25 silver badges39 bronze badges

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

2 Comments

jammy Over a year ago

.This helped.Can you give few more examples to illustrate this concept?

Sergio Moura Over a year ago

I've added more examples. I don't know if that's what you're looking for. Let me know.

Collectives™ on Stack Overflow

creating a grid in reactjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related