1

I've seen so many examples dealing with arrays and objects in react using the map function. Is there a way for me to use the old-fashioned way to use index to access elements in an array one at a time?

Young
  • 739
  • 3
  • 9
  • 12
  • 1
    call a function and that function should return array of react elements. – Dinesh undefined Jul 20 '18 at 09:43
  • 1
    check here https://stackoverflow.com/questions/22876978/loop-inside-react-jsx – Dinesh undefined Jul 20 '18 at 09:44
  • 1
    Since everything which had happened yesterday is now old-fashioned. You've got `.filter(), .forEach()` along with `.map()` function in Javascript to use index. But if You're rendering something then better use `.map()` because it not only lets you iterate through objects in array but also returns the objects. Whereas `.filter()` is supposed to be using when we are trying to eliminate objects from array on the basis of some logic. `forEach` just don't return anything, it is readonly. – Manoz Jul 20 '18 at 09:44
  • Thanks but I need to keep that object for later use. And I need to render the elements of the array one at a time. It seems I can't use filter or forEach. But it's nice to know. – Young Jul 20 '18 at 09:53
  • what do you mean with "one at a time" ? map execute the callback on items one by one. Also what is the "later use" you mention ? – Apolo Jul 20 '18 at 10:01
  • @Apolo I was planning to have a button on my webpage and after one click, I will render one of the elements of the array. Click again triggers rendering the next element in the array. – Young Jul 20 '18 at 10:04
  • 1
    Then you need to store the number of elements displayed, +1 when user clicks. and then use something like this `items.map((item,index) => { if (index >= this.state.displayCount) { return null;} else { return
    ...
    ;}}` or `items.slice(0,displayCount).map(item => {/*item render funtion*/})`     – Apolo Jul 20 '18 at 10:08
  • @Apolo I think this is a more react-like solution. Thank you! – Young Jul 20 '18 at 10:10
  • 1
    @Young: If I understood correctly, you wanted to achieve loop over an array/object and while doing so, you wanted to change an element within that array/object. I think this is merely impossible as you are recreating the structure of that array/object. The only solution would be storing object in a state and onClick set a new state and change the element you wanted. I created an example in React. Please look into this link https://codesandbox.io/embed/oowyyywo4y – bh4r4th Jul 20 '18 at 13:21
  • @OwlyMoly Can you tell me why do I need this line of code? `const { obj, pointer } = this.state;` – Young Jul 20 '18 at 23:43
  • @Young It is destructuring feature in ES6. `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment`. Instead of calling `this.state.obj and this.state.pointer` is same as `const { obj, pointer } = this.state;`. Here is another docs that gives a better overview: `http://exploringjs.com/es6/ch_destructuring.html` – bh4r4th Jul 22 '18 at 02:52
  • @OwlyMoly Oh I see. Thank you! – Young Jul 22 '18 at 03:08

0 Answers0