Display Multi Dimensional Arrays/Matrix using react

Question

I started React recently and I am stuck on a matrix issue. Columns and Rows are taken as input from the user and should display a matrix as output. Here is my code:

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      array1 : [],
      array2 : [],
      col1: null,
      row1 : null,

    }
    this.handleCol1Change = this.handleCol1Change.bind(this);
    this.handleRow1Change = this.handleRow1Change.bind(this);
  }

  handleCol1Change(e){
    this.setState({
      col1 : e.target.value
    })
  }

  handleRow1Change(e){
    this.setState({
      row1 : e.target.value
    })
  }

  createarray1(){
    for(let i=0; i < this.state.row1; i++){
      let row = []
      this.state.array1.push(row);
      for(let j=0; j < this.state.col1; j++){
        let col = "1"
        this.state.array1.push(col);
      }
      return this.state.array1
    }
  }

  handleSubmit(){
    this.createarray1()
  }

  render() {
    return (
      <div>
        <h3>Enter Dimensions</h3>
        <form>
          <h1>Matrix 1</h1>
          <input placeholder="Columns" onChange={this.handleCol1Change}/>
          <input placeholder="Rows" onChange={this.handleRow1Change}/>

          <button type="submit" onSubmit={this.handleSubmit.bind(this)}>Enter Dimensions</button>
        </form>
        {console.log("array",this.state.array1,"array2",this.state.array2)}
      </div>
    );
  }
}

I believe the fault is in my create array logic. On console.log it shows that my array is not storing anything. Any ideas on what I'm doing wrong? TIA

I put an answer, but I am a bit confused as to how you want the array to be built. Perhaps you could put a sample output of what your finished array would look like? — ageoff
– ageoff, Commented Sep 5, 2018 at 17:07

icc97 · Accepted Answer · 2018-09-05 17:29:58Z

You have a couple of issues in the createArray() method, you need to build up the row and then add it to the array. Plus as @ageoff says, you need to call setState rather than use this.state directly. This is your code changed to keep it as similar to what you currently have - but it should work.

createarray1 now just returns the array and the handleSubmit function sets the state.

Edit: I've now changed createarray1 so that it's a pure function and you pass in the rowCount and colCount. Now you can check that createarray1 works independently:

  createarray1(rowCount, colCount){
    let myarr = [];
    for(let i=0; i < rowCount; i++){
      let row = []
      for(let j=0; j < colCount; j++){
        let col = "1"
        row.push(col);
      }
      myarr.push(row);
    }
    return myarr;
  }

  handleSubmit(){
    this.setState({
      array1: this.createarray1(this.state.row1, this.state.col1)
    });
  }

Here's the function on it's own to show that it's creating the correct array:

let createarray1 = function(rowCount, colCount){
  let myarr = [];
  for(let i=0; i < rowCount; i++){
    let row = []
    for(let j=0; j < colCount; j++){
      let col = "1"
      row.push(col);
    }
    myarr.push(row);
  }
  return myarr;
}
console.log(createarray1(2,3));

ageoff · Accepted Answer · 2018-09-05 17:05:14Z

1

You are directly modifying the state when you call this.state.array1.push. You should use setState(). If you are just pushing to a state value then you can use setState({array1: [...this.state.array1, row]})

answered Sep 5, 2018 at 17:05

ageoff

2,8282 gold badges28 silver badges42 bronze badges

Collectives™ on Stack Overflow

Display Multi Dimensional Arrays/Matrix using react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related