-1

I'm new to ReactJS. And somehow, I find my codes awful If I wouldn't do something about the redundancies. My array had one hundred items. And mapping them costs too much lines. Given the class, my code looks like this:

{
   "lists": [
       {
          "item1": "Lorem",
          "item2": "Lorem",
          "item3": "Lorem"
       }, {
          "item1": "Lorem",
          "item2": "Lorem",
          "item3": "Lorem"
       }, {
          "item1": "Lorem",
          "item2": "Lorem",
          "item3": "Lorem"
       }, //...couple dozens more
   ]
}

render(){
   const lists = this.state.lists
   const list_a = lists.map((lists, i) => {
      return (
         <div key={i}>
            <div>
               <div>
                  <div>
                     <span>{lists.item1}</span>
                     <span>{lists.item2}</span>
                     <span>{lists.item3}</span>
                  </div>
               </div>
            </div>
         </div>
      )
   }).slice(0, 5)

   const list_b = lists.map((lists, i) => {
      return (
         <div key={i}>
            <div>
               <div>
                  <div>
                     <span>{lists.item1}</span>
                     <span>{lists.item2}</span>
                     <span>{lists.item3}</span>
                  </div>
               </div>
            </div>
         </div>
      )
   }).slice(5, 10)

   const list_b = lists.map((lists, i) => {
      return (
         <div key={i}>
            <div>
               <div>
                  <div>
                     <span>{lists.item1}</span>
                     <span>{lists.item2}</span>
                     <span>{lists.item3}</span>
                  </div>
               </div>
            </div>
         </div>
      )
   }).slice(10, 15)
}

As you can see, it looks ridiculous. Is there a way where I can somehow manipulate slice like ".slice(0, n)" or something like that?

DaOneRom
  • 284
  • 4
  • 18
  • What are you trying to archive here? Why do you need to slice them out? If they are separated, the data should give you in separated arrays. If you want to do pagination, this is the dead wrong way to do. – Sang Dang Sep 28 '19 at 04:06
  • Yu can first slice the array and then do a map. Why you need to map over all array items and then slice the results ? – Nithin Thampi Sep 28 '19 at 04:08
  • @Sang Đặng. I forgot to mention, the api I'm using is for data purpose only. Just placeholders I want to use. Whenever I need to fill some contents, this is what I'll use. – DaOneRom Sep 28 '19 at 04:14
  • Then create another children component for list_a, list_b, list_c, it accepts props as sliced list, then you can call later. – Sang Dang Sep 28 '19 at 04:16
  • https://stackoverflow.com/questions/8495687/split-array-into-chunks this could be the one you need. – Sang Dang Sep 28 '19 at 04:30

1 Answers1

0

Write another child component to do that job:

const ChildList = ({ list }) => {
    return list.map((item, i) => {
        return (
            <div>
                {item.item1}
                {item.item2}
                {item.item3}
            </div>
        );
    }
}

then you can call from parent:

render () {
    const lists = this.state.lists;
    const chunk = 5;

    const slicedLists = lists.reduce((acc, item, index) => { 
      const chunkIndex = Math.floor(index/chunk);
      if(!results[chunkIndex]) {
        results[chunkIndex] = [] // start a new chunk
      }
      results[chunkIndex].push(item);
      return results;
    }, []);

    return (
        <div>
            {slicedLists.map((list, index) => {
                return (<ChildList key={index} list={list} />);
            })
        </div>
    );
};
Sang Dang
  • 501
  • 1
  • 11
  • 26
  • I've followed the link. I got fascinated, and at the same time, got confused by the ES6 version. And when I came back, you've already managed to somehow alter your answer based on that ES6. Thanks, I'll definitely try this one. – DaOneRom Sep 28 '19 at 04:41
  • Don't let the ES6 scares you, it is your friend. You can replace the reduce part with old for loop, it will just work. The key here is trying to make the child component if you see your code start getting long. – Sang Dang Sep 28 '19 at 04:43