CODEWITHSUNDEEP
arraysreactjsmapping
Luke Egan
Luke Egan

Reputation: 81

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

Table 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?

Upvotes: 0

Views: 223

Answers (1)

Morris
Morris

Reputation: 765

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

Upvotes: 1

Related Questions