React Native array map with multidimensional array

Question

I need to map through a multidimensional array such as the following:

var array=[["1"],["3","8"],["4","8","3"],["4","8","3","9"],["1","8","3","9","2"],["6","8","3","9","2","1"],["4","8","3","9","2","11","2"]]

This code currently only maps through the 'columns' of the array.

var theValue = array.map((key, idx) => {
  if (key === this.state.active) {
    return <Main key={key + 'd'} dummy={true} />;
  } else {
    if (!this.state.restLayouts[idx]) {
      var onLayout = function(index, e) {
        var layout = e.nativeEvent.layout;
        this.setState((state) => {
          state.restLayouts[index] = layout;
          return state;
        });
      }.bind(this, idx);
    }
    return (
      <Main
        key={key}
        id={key}
        openVal={this.state.openVal}
        onLayout={onLayout}
        restLayout={this.state.restLayouts[idx]}
        onActivate={this.setState.bind(this, {
          active: key,
          activeInitialLayout: this.state.restLayouts[idx],
        })}
      />
    );
  }
});

Ok I guess I should have explained that. A grid. But each column may be different lengths since the array columns are of different lengths. — Hasen
– Hasen, Commented May 4, 2016 at 9:45

Yuya · Accepted Answer · 2016-05-04 15:33:38Z

1

Here's a quick example of mapping a 2D array into a table. Dynamic width based on the amount of element per row using Flexbox:

<table style={{ display: 'flex', flexDirection: 'column' }}>
  <tbody>
    {
      array.map(arr => {
        if (arr === this.state.active) {
          return (
            <tr style={{ display: 'flex', justifyContent: 'space-around'}}>
              {
                arr.map(datum => {
                  return (<th>{datum}</th>);
                }
              }
            </tr>
          );
        } else {
          return (
            <tr style={{ display: 'flex', justifyContent: 'space-around'}}>
              {
                arr.map(datum => {
                  return (<td>{datum}</td>);
                }
              }
            </tr>
          );
        }
      ))
    }
  </tbody>
</table>

edited May 4, 2016 at 15:33

answered May 4, 2016 at 14:11

Yuya

2,3111 gold badge12 silver badges16 bronze badges

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

6 Comments

Hasen Over a year ago

Thanks for your reply. Is there a way to do it that is more similar to the code I posted? Not necessarily React Native but how would you do it if the array was first assigned to a variable (theValue) and then using 'return'?

Yuya Over a year ago

You can always assign the above code to a variable: const theValue = (<table> ... </table>). It's just a demo of how you can do nested mapping, as I thought the question was about?

Hasen Over a year ago

Yes it is, just not quite sure how to implement your example into my code is all.

Yuya Over a year ago

I've expanded the syntax to use returns. Does this clear things out a little?

Hasen Over a year ago

Yes that is a lot better although its really very different in React Native. There's no HTML so no tables and also you can't have the code like that inside JSX elements. It will just return errors. That's why I have it assigning to a variable, doing all the code calculation first and then the variable alone is returned inside the JSX. It does help though thanks.

|

Collectives™ on Stack Overflow

React Native array map with multidimensional array

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related