How to create a dynamically sized form for an array of inputs using React/Redux?

Question

I'm working on an application on for analyzing matrices (https://en.wikipedia.org/wiki/Matrix_(mathematics)) using techniques from linear algebra. I have all the functions created for doing the analysis/computation, but I'm having trouble figuring out how to set up a dynamically sized form of numerical inputs in react.

I have a couple idea on how to implement it (neither of which is working as I'd hoped). One being to use a container component called Matrix that instantiates a grouping of child Entry components that would be used for actually getting the input. The only problem is how to best iterate over those entries and get their individual values. Past that, figuring out how to best display them has also proven challenging.

The Array.prototype.map seems like a solid way after getting the right size matrix (using row and col values in the store's state) but the component organization is elusive. The rows and cols are currently obtained from the store and then passed in as props to the Matrix component.

render() {
let arr = [];
for (let i = 0; i < this.props.rows; i++) {
  arr[i] = [];
  for (let j = 0; j < this.props.cols; j++) {
    arr[i][j] = `${i},${j}`;
  }
}

var entries = arr.map((rows, i) => {
  return rows.map((cols, j) => {
    return <Entry id={`${i},${j}`} value={0}/>
  });
});
console.log(arr);
console.log(entries);

return (
  <div>
    {entries}
  </div>
);`

The end goal is to create a composite array of arrays with numbers inside that can then be added to the state via reducers already tested and created. The form of the matrix is: [[1,0],[0,1]] for a 2x2 matrix. So ultimately it would probably look and be formatted on the page as:

`<Entry id={"0,0"} /> <Entry id={"0,1"} />
 <Entry id={"1,0"} /> <Entry id={"1,1"} />`

Which then could be translated into the above style matrix. Also, to be clear, each entry is its own input tag (technically using FormControl from react-bootstrap).

What is the problem? do you get any errors? render incorrectly? — Noam, Dec 16 '16 at 18:46
It does a mix of render incorrectly (it just layers the Entries on top of each other because I'm not sure how to enclose the Entries in a FormGroup to get the rows looking like rows. I also haven't been able to properly query the values from the Entry components. I've checked out the below, but because the data is intended to be changed and reflected when a submit button is hit, i'm not sure how to get all the values in one place. http://stackoverflow.com/questions/22639534/pass-props-to-parent-component-in-react-js — Blake Geraci, Dec 16 '16 at 18:50

Noam · Accepted Answer · 2016-12-16T19:29:38.610

0

I think I understand, there are few ways to do that but I'll go with your way

render() {
  let arr = [];
  for (let i = 0; i < this.props.rows; i++) {
    arr[i] = [];
    for (let j = 0; j < this.props.cols; j++) {
      arr[i][j] = `${i},${j}`;
    }
  }

  console.log(arr);
  console.log(entries);

  return (
    <div>
      {arr.map((rows, i) =>
        <FormGroup>
          {rows.map((cols, j) =>
            <Entry id={`${i},${j}`} value={0}/>
          )}
        </FormGroup>
      )}
    </div>
  );
}

Here you'll get

<FormGroup>
  <Entry>
  <Entry>
</FormGroup>
<FormGroup>
  <Entry>
  <Entry>
</FormGroup>

For the matrix you gave as example Notice that I removed the curly brackets and the return and use a shorthand

edited Dec 16 '16 at 19:29

answered Dec 16 '16 at 18:59

Noam

1,018
7
18

That works! I still need to do the formatting so that they display as rows, but that definitely fixes the first half of the problem. The last part now is query all the Entry components. – Blake Geraci Dec 16 '16 at 19:16
That's for you to do with Redux :) watch these great videos from redux author here: https://egghead.io/courses/getting-started-with-redux. Also please accept this answer to mark this question as solved. – Noam Dec 16 '16 at 19:19

How to create a dynamically sized form for an array of inputs using React/Redux?

1 Answers1