0

I am trying to do splice, so that each page (Active & Other items) displays 3 items. But this is not working. Can someone help here please?

Below is the code:

var Cards1= filter.splice(0, Math.ceil(filter.length / 3)).map( item => {
  return (
    <div class="cards">
    <div class="title">
    <h6><b>{item.Name }</b></h6>
    </div>
    <div class="des">
    <p> {item.DescriptionEN}</p>
    </div>
    </div>
  )
})
var Cards2= filter.splice(filter.length / 3).map( item => {
  return (
    <div class="cards">
    <div class="title">
    <h6><b>{item.Name }</b></h6>
    </div>
    <div class="des">
    <p> {item.DescriptionEN}</p>
    </div>
    </div>
  )
})
<div class="main">
<div id="inam" class="carousel slide" data-ride="carousel" >
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card-deck">
{Cards1}
</div>
</div>
<div class="carousel-item">
<div class="card-deck">
{Cards2}
</div>
</div>
mary
  • 57
  • 9

1 Answers1

1

Please try this.

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      filter: [
        {
          name: "AAA",
          description: "BBB"
        }
      ]
    }
  }

  renderCards = (cards) => (
    cards.map(item => (
      <div class="cards">
        <div class="title">
          <h6><b>{item.name}</b></h6>
        </div>
        <div class="des">
          <p>{item.description}</p>
        </div>
      </div>
    ))
  )

  getSeparatedArray = (array) => {
    const res = [];
    for (let i = 0; i < array.length; i += 3) {
        const temp = array.slice(i, i + 3);
        res.push(temp);
    }
    return res;
  }

  render () {
    const { filter } = this.state
    const cardsList = this.getSeparatedArray(filter)

    return (
      <div class="main">
        <div id="inam" class="carousel slide" data-ride="carousel" >
          <div class="carousel-inner">
            {
              cardsList.map(cards => (
                <div class="carousel-item">
                  <div class="card-deck">
                    {this.renderCards(cards)}
                  </div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
    )
  }
}
michael
  • 4,053
  • 2
  • 12
  • 31
  • Thank you so much for your prompt response. this really helped me . But only issue is i may not be able to do this if i have 100 items/cards . instead of defining as const cards , is that something which i could do..? I would really appreciate your help on this. – mary Oct 22 '20 at 15:39
  • It doesn't matter even you have more than 100 items. Lemme update the answer so that you can get sth. – michael Oct 22 '20 at 15:44
  • One more thing i would like to add, with the above solution, i am getting 3 items in firstslide and 2 items in subsequent slides. – mary Oct 22 '20 at 15:46
  • Let's say the filter array length is 7. In this case, the current logic will show 2, 2, 3 items. – michael Oct 22 '20 at 15:55
  • I've just edited it again. Hope it is what you need. – michael Oct 22 '20 at 16:09
  • If there's more to add, please lemme know. If not I hope you check the answer for the other guys. – michael Oct 22 '20 at 16:22
  • In my case, current Length shows as 23, so it shows as Array(8), Array(8), Array (7) is the split. but i want the first and subsequent slide to have only 3 items :-( – mary Oct 22 '20 at 17:12
  • Also, in my UI it says ReferenceError: renderCards is not defined, if i access this.renderCards, UI displays nothing – mary Oct 22 '20 at 17:14
  • So do you need sth like Array(3), Array(3), Array(17)? – michael Oct 22 '20 at 17:25
  • You should use `this.renderCards(cards)`. I've edited above code. – michael Oct 22 '20 at 17:25
  • I would need Array(3), Array(3), Array(3) , Array(3) , Array(3), Array(3), Array(3) , Array(2) -> Length is not fixed, so whatever the length would be it should split the array to 3 items. if items are less then 2 or 1 instead of 3. – mary Oct 22 '20 at 17:30
  • I've changed `getSeparatedArray` function. It would be helpful. – michael Oct 22 '20 at 17:46
  • Thank you so much for all your prompt response. I see now the array split in logs is proper but in UI doesnt show anything :-( – mary Oct 22 '20 at 18:06
  • Edited again. I've tested this on my side and it showed texts. Please check it on your side as well. – michael Oct 22 '20 at 18:18
  • not sure what am i missing here, in logs i see its getting proper array. but in UI Cards, it displays empty instead of separatedArray :-( – mary Oct 25 '20 at 05:17