CODEWITHSUNDEEP
javascriptreactjs
user6840964
user6840964

Reputation:

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

Upvotes: 2

Views: 6264

Answers (3)

Shubham Khatri
Shubham Khatri

Reputation: 281646

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>

Upvotes: 2

Piotr Berebecki
Piotr Berebecki

Reputation: 7468

One way of presenting your data may be as follows: http://codepen.io/PiotrBerebecki/pen/jrVkdO

Here is the code for the React component class:

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() {
    console.log();
    return (
      <table>   
        <thead>
          <th>
            <td>Month</td>
            <td>Name</td>
            <td>Birthday</td>
          </th>
        </thead>
        <tbody>
        {Object.keys(this.state.birthdays).map((month, key) => {
          return (     
            <tr key={key}>
              {this.state.birthdays[month].map((person, index) => {
                return (
                  <tr key={String(key) + String(index)}>
                    <td>{month}</td>
                    <td>{person.name}</td>
                    <td>{person.date}</td>
                  </tr>
                );
              })} 
            </tr>         
          )
        })}
        </tbody>
      </table>
    );
  }
}

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

Upvotes: 1

martriay
martriay

Reputation: 5742

You're using jsx which is an extension of javascript by including html tags, this means that you can use them within your javascript code.

You need to open the <table> tag before iterating over your birthdays so you can create the <tr> (rows) inside it.

return <table>
  {
    birthdays.map((bday) => (
      <tr>
        <td>{bday.name}</td>
        <td>{bday.date}</td>
      </tr>
    );
  }
</table>

I suggest you read more about table elements in html.

Upvotes: 2

Related Questions