Mapping a multidimensional array using ReactJS

Question

Just started with ReactJS, and I'm looking for the most efficient code to display the array below in the table structure, as described in the rendering section. I use .map to iterate through users / buttons objects, but have not succeeded so far.

In my code sample below, I want to take an array of userData and display the content in separate lines (html table format), i.e.

Joe, Smith, [Click 1A], [Click2B] // 'Click XX' - these are buttons

Mary, Murphy, [Click 2A], [Click2B]

How can i achieve this?

thank

var MyButton = require('./mybutton.js');

var userData =[{ 
userButtons: [
[{user: [{ id: 1, lastName: 'Smith', firstName: 'Joe', 
    buttons: [
        {button:[{ id:0, value: "Click 1A" enabled:1}]},
        {button:[{ id:1, value: "Click 1B" enabled:1}]}
    ]
    }]}],
[{user: [{ id: 1, lastName: 'Murphy', firstName: 'Mary', 
    buttons: [
        {button:[{ id:0, value: "Click 2A" enabled:1}]},
        {button:[{ id:1, value: "Click 2B" enabled:1}]}
    ]
    }]
}]
]}];

var DisplayData = React.createClass({
  render: function() {
    // render userButtons in a table with data using <MyButton> ie.
    // <table>
    // <tr><td>Joe</td><td>Smith</td><td>[Click 1A]</td><td>[Click 2A]</td</tr>
    // <tr><td>Mary</td><td>Murphy</td><td>[Click 2B]</td><td>[Click 2B]</td></tr>
    // </table>
  }
  }
});
React.render(
    <DisplayData tArr = {userData} />
, document.getElementById('content')
);



// mybutton.js
var React  = require('react');

module.exports = React.createClass({
  render: function() {
    return (
        <button>{this.props.value}</button>
    )
  }
});

Answer 1

, userData, .. , , , .

- :

var userButtons = [
    {
        id: 1,
        lastName: 'Smith',
        firstName: 'Joe',
        buttons: [
            {
                id: 0,
                value: "Click 1A",
                enabled: 1
            }, {
                id: 1,
                value: "Click 1B",
                enabled: 1
            }
        ]
    },
    {
        id: 2,
        lastName: 'Murphy',
        firstName: 'Mary',
        buttons: [
            {
                id: 0,
                value: "Click 2A",
                enabled: 1
            }, {
                id: 1,
                value: "Click 2B",
                enabled: 1
            }
        ]
    }
];

:

return (
    <table>
        {
            userButtons.map(function(ub) {

                var buttons = ub.buttons.map(function(button) {
                    return (
                        <td>{button.value}</td>
                    )
                });

                return (
                    <tr>
                        <td>{ub.firstName}</td>
                        <td>{ub.lastName}</td>
                        {buttons}
                    </tr>
                )
            })
        }
    </table>
)

Answer 2

, - :

handleClick: function(id, value) {
    // do something
},

render: function() {
    var rows = userData.userButtons.map(
                   function(u) {
                       var buttons = u.buttons.map(
                           function(b) {
                               return <Button onClick={function() { this.handleClick(b.id, b.value)}.bind(this);}
                                             enabled={b.enabled===1}>
                                         {b.value}
                                     </Button>;
                       });

                       return <tr>
                                  <td>{u.firstName}</td>
                                  <td>{u.lastName}</td>
                                  {buttons}
                              </tr>;
                   });
    return <table>{rows}</table>;
}

, Button - -.