user6840964 user6840964 - 2 months ago 9
React JSX Question

How do you create a complete html like table in reactjs?

I'm learning react and I'm trying to figure out how I would put this information into a table. I know there is

<table></table>


in html so I'm assuming I would use something like that within the javascript. I'm trying to create a table where the the month of the birthday contains the name and the date of each person.

Any advice/help would be great!

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

this.state = {
birthdays: {
'January': [{
name: 'Mike',
date: '1/14/90'
}, {
name: 'Joe',
date: '1/7/92'
}],

March: [{
name: 'Mary',
date: '3/7/88'
}]
}
}
}

render() {
return (
<div>
{Object.keys(this.state.birthdays).reduce((birthdays, month) => {
return birthdays.concat(this.state.birthdays[month].map((bday) => {
return (
<p>{bday.name} - {bday.date}</p>
);
}));
}, [])}
</div>
);
}
ReactDOM.render(<App />,
document.getElementById('container'));


Excuse the formatting of the code.

Answer

You need to first map the keys and then iterate over the birthdays object. Also put single quotes on March like 'March'

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

            this.state = {
              birthdays: {
                'January': [{
                  name: 'Mike',
                  date: '1/14/90'
                }, {
                  name: 'Joe',
                  date: '1/7/92'
                }],

                'March': [{
                  name: 'Mary',
                  date: '3/7/88'
                }]
              }
            }
          }
           renderTableRows =  () => {
           var rows = [];
           Object.keys(this.state.birthdays).forEach((month, key) => {              var birthdays = this.state.birthdays[month];
               birthdays.forEach((obj) => {
            
            rows.push (
              <tr>
              <td>{month}</td>
              <td >{obj.name}</td>
              <td>{obj.date}</td>
              </tr>
            )
            
            })

          })
          var tby = null;
             tby = <tbody>
                     {rows.map((obj, key) => {
                        return (
                          obj
                        )
                     })}
                   </tbody>
          return tby;
           
           }
          render() {
            return ( 
               <div>
                <table className="table table-striped">
                  <thead>
                  <tr>
                    <th>Month</th>
                    <th>Name</th>
                    <th>Date</th>
                  </tr>
                   </thead>
                  
                  
                {this.renderTableRows()}
        </table>
      </div>
    );
}
}
ReactDOM.render(<App />, 
document.getElementById('container'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
<div id="container"></div>