CODEWITHSUNDEEP
javascriptreactjs
Jack23
Jack23

Reputation: 1396

Insert map result inside table

I'm trying to insert an map inside a table like this: 

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Meeting</th>
      <th scope="col">Details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"></th>
      <td>Information</td>
      <td>Detail Button</td>
    </tr>
    </tbody>
</table>

In particular I have this map function to print all the values that I get from a fetch.

render() {
    const list = this.props.meetings.map((meeting) => (
      <li key={meeting.id}>
        {meeting.information}
        <button
          key={meeting.id}
          onClick={() => this.handleClick(meeting)}
          value={meeting.id}
        >
          {"Details"}
        </button>
      </li>
    ));

How can I do to put every "meeting" in a row in the table?

Thank you

EXAMPLE:

# |  Meeting                | Details
  | {meeting.information1}  | ButtonDetailsInformation1
  | {meeting.information2}  | ButtonDetailsInformation2

Upvotes: 0

Views: 262

Answers (2)

Gopinath
Gopinath

Reputation: 4937

Suppose that the meeting data is like this:

meetings: [
{id: 101, title: "Daily standup", description: "Short meeting that happens everyday"},
{id: 102, title: "Demonstration", description: "Show the working solution to customer"},
{id: 103, title: "Retrospective", description: "Long meeting that happens at the end of sprint"}
]

In React component, these meetings can be arranged into separate table rows using map as follows:

// Meeting component defined in Meeting.jsx file

export default class Meeting extends React.Component {
    render() {
        return(
            <div className="row">
                <div className="col">{this.props.id}</div>
                <div className="col">{this.props.title}</div>
                <div className="col">{this.props.description}</div>
            </div>
        )
    }
}



// Main program calling Meeting component using map

<div className="meetings-table">
    {
         meetings.map( (item) =>
             <Meeting id={item.id}  
                      title={item.title}  
                      description={item.description} 
             />
         )
    }
</div>

Output:

+-----+----------------------------------------------------------------+
| 101 | Daily standup | Short meeting that happens everyday            |
+-----+----------------------------------------------------------------+
| 102 | Demonstration | Show the working solution to customer          |
+-----+----------------------------------------------------------------+
| 103 | Retrospective | Long meeting that happens at the end of sprint |
+-----+----------------------------------------------------------------+

Upvotes: 1

Kireeti Ganisetti
Kireeti Ganisetti

Reputation: 236

import React,{Component} from "react";

class App extends Component{
  render(){
    return (
      <table class="table">
        <thead>
         <tr>
          <th scope="col">#</th>
          <th scope="col">Meeting</th>
          <th scope="col">Details</th>
         </tr>
        </thead>
        <tbody>
         {this.props.meetings.map((meet, index)  => <tr key={meet.id}>
          <th scope="row">{index}</th>
          <td>{meet.information}</td>
          <td> <button
          onClick={() => this.handleClick(meet)}
        ></td>
        </tr>}
        </tbody>
    </table>
     );
 }
}
export default App;

i hope this what you are expecting

Upvotes: 1

Related Questions