React JS: Only map certain elements of an array within JSX tag, where the elements to map are iterated

Question

I have programatically created the above table in React using, the below code:

tableRenderer() {

    let table = <Table striped bordered hover responsive="sm" id='mytable'>
        <thead>
        <tr>
            {this.state.headers.map((header, index) =>
                <th key={index}>{header} </th>
            )}
        </tr>
        </thead>

            {this.state.timeLabels.map((label, index)=>
                <tr key={index}>   <td><b>{label} </b></td>
                    {this.state.table.slice(0,4).map((match, index)=>
                        <td key={index}>{match.teamA} vs {match.teamB}</td>
                    )}
                </tr> )}
                </Table>;

However I'm stuck on the last piece of functionality I need: How can I change the value of the slice of the table array, so on the first run it slices 0->number of pitches, second run number of pitches-> number of pitches+number of pitches... etc. Do I need to create some sot of function that will iterate a variable every time a row is created?

wentjun · Accepted Answer · 2020-04-13 16:43:39Z

1

It would be something along the lines of:

{this.state.timeLabels.map((label, index)=> {
  const NO_OF_PITCHES = 4;
  let from = NO_OF_PITCHES * index;
  let to = NO_OF_PITCHES * (index + 1);

  return <tr key={index}>
    <td><b>{label}</b></td>
    {this.state.table.slice(from,to).map((match, index)=>
      <td key={index}>{match.teamA} vs {match.teamB}</td>
    )}
  </tr>)}
}

that's assuming the slicing is 0,4... 4,8... 8,12... etc

also you could lift NO_OF_PITCHES to the parent of the map function because it doesn't have to be recreated on each iteration

edited Apr 13, 2020 at 16:43

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

answered Apr 13, 2020 at 11:15

Morris

8158 silver badges11 bronze badges

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

1 Comment

Luke Egan Over a year ago

Thank you, this worked I just had to edit to add a return value.

Collectives™ on Stack Overflow

React JS: Only map certain elements of an array within JSX tag, where the elements to map are iterated

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related