How to pass 2D array into array.prototype.map() with React.js

Question

I have the following 2D array timeArray in the state of my parent component in React. I am using it in the render() function as per follows:

render() {
  return (
    <div><Manager data={this.state.timeArray} /></div>
  );
}

In my Manager component's render() function, I then use the following:

render() {
  return (
    <div>
      {this.props.data.map((weekId, i) => (
        <Week key={i} weekData={weekId} />
      ))}
    </div>
  );
}

I am expecting weekData when I pass it into Week to be an array, as timeArray from my parent component is a 2D array. However, when I use console.log(this.props.weekData) in Week's render() function, I get undefined, not the actual data from the array. What is the best way to pass this in?

EDIT: Per request, here's most of the source:

App

// preceded by various imports
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timeArray = []
    }
  }
  handleNewClick() {
    let tempWeek = this.getInput();
    let tempArr = this.state.timeArray.slice(0);
    console.log(tempArr); // logs []
    tempArr.push(tempWeek);
    console.log(tempArr); // logs [1, 1, 1, 1]
    this.setState({ timeArray: tempArr });
  }
  getInput() { // unimplemented, returning expected values for testing
    return [1, 1, 1, 1]
  }
  render() {
    return (
      <div>
        <Manager weeksData={this.state.timeArray} />
        <button onClick={this.handleNewClick.bind(this)}>
          Add Week
        </button
      </div>
    );
  }
}
export default App;

Manager

//various imports
class Manager extends React.Component {
  render() {
    console.log(this.props.weeksData);
    // ^^ logs [1,1,1,1] for each button press, e.g.
    // 1 button press: [[1,1,1,1]]
    // 2 button presses: [[1,1,1,1],[1,1,1,1]] and so on
    return (
      <div>
        {this.props.weeksData.map((weekId, i) => (
          <Week key={i} data={weekId} />
        ))}
      </div>
    );
  }
}
export default Manager;

Week

// various imports
class Week extends React.Components {
  render() {
    let weekData = this.props.weekId;
    console.log(weekData); // logs undefined, which is not as expected
    render() { // unimplemented
      return <div></div>;
    }
  }
}
export default Week;

All code is used and rendered in a Container component, which is:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

class Container extends React.Components {
  render() {
    return (
      <div>
        <App />
      </div>
    );
  }
}

ReactDOM.render(
  <Container />,
  document.getElementById('react')
);

Sorry for the rudimentary question, I'm still learning how to use ReactJS — wcarhart
– wcarhart, Commented Jun 27, 2017 at 1:11
I could not reproduce your problem. Can you post the rest of your code? — Mμ.
– Mμ., Commented Jun 27, 2017 at 4:05

Mμ. · Accepted Answer · 2017-06-27 04:42:46Z

Firstly, you have a lot of typos in your code, I've fixed them in my solution below.

So the main issue here is that you are trying to access props that does not exist. When you pass data to your Week component (data={weekId}), the props data will exist in the Week component, and NOT weekId property. So if you access this.props.data instead of this.props.weekId you will get your data.

// preceded by various imports
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timeArray : []
    };
  }
  handleNewClick() {
    let tempWeek = this.getInput();
    let tempArr = this.state.timeArray.slice(0);
    console.log(tempArr); // logs []
    tempArr.push(tempWeek);
    console.log(tempArr); // logs [1, 1, 1, 1]
    this.setState({ timeArray: tempArr });
  }
  getInput() { // unimplemented, returning expected values for testing
    return [1, 1, 1, 1]
  }
  render() {
    return (
      <div>
        <Manager weeksData={this.state.timeArray} />
        <button onClick={this.handleNewClick.bind(this)}>
          Add Week
        </button>
      </div>
    );
  }
}

// various imports
class Manager extends React.Component {
  render() {
    return (
      <div>
        {this.props.weeksData.map((weekId, i) => (
          <Week key={i} data={weekId} />
        ))}
      </div>
    );
  }
}

// various imports
class Week extends React.Component {
  render() {
    let weekData = this.props.weekId;
    console.log(weekData); // logs undefined, which is not as expected
    console.log(this.props.data); // logs the data as expected
    return <div>unimplemented component</div>;
    
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Wow, that was a really simple mistake, thanks for the assistance. And my apologies for being a novice, didn't mean to turn this into an extend debugging session.

Brandon Olivier · Accepted Answer · 2017-06-27 03:17:22Z

1

Somewhere in the code you haven't posted there's an error in how you're configuring your timeArray variable. This works fine for me.

class ManagerContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { timeArray: [
    {id: 1}, {id: 2}, {id: 3}
    ]}
  }
  render() {
    return (
      <div><Manager data={this.state.timeArray} /></div>
    );
  }
}

class Manager extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        {this.props.data.map((week, i) => (
          <Week key={i} weekData={week} />
        ))}
      </div>
    );
  }
}


class Week extends React.Component {
  render() {
    return (
      <p>week number: {this.props.weekData.id}</p>
    )
  }
}
ReactDOM.render(<ManagerContainer />, document.getElementById('app'))

and on jsbin

answered Jun 27, 2017 at 3:17

Brandon Olivier

5785 silver badges16 bronze badges

3 Comments

wcarhart Over a year ago

Does each element of timeArray need an id? The initialization is timeArray: []; in my constructor, but I then push arrays onto it using let temp = [0,1,0], let arr = this.state.timeArray.slice(0) arr.push(temp), and then this.setState({ timeArray: arr }), so timeArray is an array of arrays, but each element doesn't have an id. I can't reference them as this.props.weekData.id in the Week component.

wcarhart Over a year ago

I can add to my question if this isn't clear, as I didn't think this affected the error

Brandon Olivier Over a year ago

The particulars about it shouldn't be important so long as you're handling the data correctly. The code I posted runs like what I think you're expecting. Compare your code to that and start changing it until something makes sense to you.

Collectives™ on Stack Overflow

How to pass 2D array into array.prototype.map() with React.js

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related