Displaying multi dimensional array with ReactJS

Question

Just started with ReactJS and I'm looking for the most efficient code to display the array below in a table structure as described in the 'render' section. I have been using .map to iterate through the users/buttons objects, but with no success yet.

In my code sample below, I want to take the userData array and display the content in separate rows (html table format)ie.

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

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

How can I achieve this?

Thanks

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>
    )
  }
});

Welcome to StackOverflow! I'm afraid your question is a little unclear. Can you summarize what you're asking as a short sentence in the form of a question? — dgvid
– dgvid, Commented Apr 15, 2015 at 19:28
dgvid - added a few more comments. Hope that makes it a little clearer. thx — pgfitzpatrick
– pgfitzpatrick, Commented Apr 15, 2015 at 19:39

Austin Greco · Accepted Answer · 2015-04-15 21:19:32Z

10

I would suggest you simplify your userData if possible.. you have quite a bit of extra nested arrays that don't seem to be needed.

Something like this:

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
            }
        ]
    }
];

Then it's easy to loop through and return the right elements:

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>
)

answered Apr 15, 2015 at 21:19

Austin Greco

33.6k6 gold badges60 silver badges61 bronze badges

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

1 Comment

pgfitzpatrick Over a year ago

thanks for the response Austin. Cleaned up the data and got it all working. Appreciate the help. :)

edoloughlin · Accepted Answer · 2015-04-15 22:51:35Z

0

Something like the following might work:

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>;
}

Where I assume you can get Button from something like react-bootstrap.

edited Apr 15, 2015 at 22:51

answered Apr 15, 2015 at 21:28

edoloughlin

5,9214 gold badges35 silver badges61 bronze badges

1 Comment

pgfitzpatrick Over a year ago

thanks edoloughlin. Between your answer and Austins, everything is now working! U guys rock!

Collectives™ on Stack Overflow

Displaying multi dimensional array with ReactJS

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related