Create table using iterative statements in "react" rendering

Question

I try to create a table with two arrays in a state(week_today, week_count) and a repeating sentence when rendering. I don't know how to use map() function . Please advise.

my code

    render() {
        const {week_today, week_count} = this.state; // this.state in my array put



        return (
            <div>

                <table class="table">
                    <thead class="thead-dark">
                        <tr>
                            <th scope="col">today</th>
                            <th scope="col">count</th>
                        </tr>
                    </thead>
                    <tbody>
                     //<== here my array table


                    </tbody>

                </table>
            </div>

        )
    }

use my arrays

week_today = [ 01,02,03,04,05]
week_count = [ 1,2,3,4,5]

React has good documentation on creating lists

Agney
– Agney

2020-02-14 08:56:42 +00:00
Commented Feb 14, 2020 at 8:56 — Agney
– Agney, Commented Feb 14, 2020 at 8:56

Oshini · Accepted Answer · 2020-02-14 10:49:32Z

5

Try below. Just a sample code

  constructor(props) {
    super(props);
    const week_today = ['01', '02', '03', '04', '05'];
    const week_count = [1, 2, 3, 4, 5];

    this.state = {
      week_today: week_today,
      week_count: week_count
    };
  }
  render() {
   const {week_today, week_count} = this.state; // suggest you to use destructuring your variables:
    return (
      <div>
        <table class="table">
          <thead class="thead-dark">
            <tr>
              <th scope="col">today</th>
              <th scope="col">count</th>
            </tr>
          </thead>
          <tbody>
            {week_today.map((today, index) =>
                <tr key={index}>
                  <td>{today}</td>
                  <td>{week_count[index]}</td>
                </tr>
            )}
          </tbody>

        </table>
      </div>
    )
  }

edited Feb 14, 2020 at 10:49

answered Feb 14, 2020 at 8:59

Oshini

6416 silver badges18 bronze badges

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

1 Comment

hoon3024 Over a year ago

Thanks! Just sample but diff for me!

Kirill · Accepted Answer · 2020-02-14 09:18:56Z

1

Slightly changed the data structure (add this to your state):

week: [
 { today: '01', count: 1 },
 { today: '02', count: 2 },
 { today: '03', count: 3 },
 { today: '04', count: 4 },
 { today: '05', count: 5 }
]

And add this to your render:

<tbody>
  {this.state.week.map( element => {
      return (
        <tr>
          <td>
            {element.today}
          </td>
          <td>
            {element.count}
          </td>
        </tr>
      )
    })
  }
</tbody>

answered Feb 14, 2020 at 9:18

Kirill

1111 silver badge3 bronze badges

Collectives™ on Stack Overflow

Create table using iterative statements in "react" rendering

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related