score:0

because, this.setstate (...) is asynchronous function. if you want to call this.matrix.current.changeelements(this.state.integers); function after updated the parent state, set the second argument of this.setstate (...) to the callback function.

this is the fixed code

class inputform extends component {
...
  addintegers = v => {
    const newintegers = this.state.integers.slice();
    newintegers.push(v);
    this.setstate({ integers: newintegers }, () => {     // use callback
        this.matrix.current.changeelements(this.state.integers);
    });
  };
...
class matrix extends component {
  constructor(props) {
    super(props);
    this.state = {
       rows: 0,
       cols: 0,
       elements: this.props.value || [[]] // try like this.
    };
  }

  changeelements = props => {
    // this.setstate({ elements: this.props.values }); // wrong
    this.setstate({ elements: props.values }, () => {
       console.log(this.state.elements);
    }); // maybe like this
  };

this is a simple example.

class app extends react.component {
  constructor(props) {
    super(props);
    this.child = react.createref();
    this.state = {
      value: "aaa",
    }
  };

  updatechild = () => {
    this.setstate({value: "bbb"}, () => {
      this.child.current.changeelements(this.state.value);
    })
  };
  
  render() {
    return (
      <div>
        <button onclick = {this.updatechild} > click here </button>
        <child ref={this.child} values={this.state.value} />
      </div>
    );
  }
}

class child extends react.component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.values,
    };
  }

  changeelements = value => {
    this.setstate({ value });
    console.log(value);
  };
  
  render() {
    console.log(this.state.value)
    return (
      <div>{this.state.value}</div>
    );
  }
}

reactdom.render( < app / > , document.getelementbyid('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

score:1

in the parent component you are passing values as props

<matrix ref={this.matrix} values={this.state.integers} />

while in the matrix you are accessing:

constructor(props) {
    super(props);
    this.setstate({ elements: this.props.value });
  }

where this.props.value is not there, you should access the this.props.values


Related Query

More Query from same tag