How to use map() with another function in ES6?

Question

Im trying to use a javascript function I have made to iterate over an array.My function looks like this and it works:

const shuffleAndPick = (array, amount) => {
    return array.sort(() => 0.5 - Math.random()).slice(0, amount);
  };

The thing is that I want it to iterate over an array and pick certain things like, ${image} ${name} etc.

Something like this (but only for the objects that my function randomly selects, as this example would iterate over the whole array):

{images.map((images) => (
        <div className="key" key={images.id}>
        <h3>{images.name}</h3>
        <h3>{images.sanskritname}</h3>
        <p>{images.description}</p>
        <img src={images.image} alt={images.name} />
        </div> 
      ))}

Do I need to use my function with a map() for my purpose? And how would I write the correct syntax for that that if I want to write it in es6?

Thanks

Do you want to iterate over array after sorting? did you try foreach() ? — Hallah, Mar 14 '20 at 10:32
(Off-topic) Shuffling an array the way you try to do is strongly biased. See [this SO post](https://stackoverflow.com/q/2450954/8376184) for truly random shuffling — FZs, Mar 14 '20 at 10:34
I added an example in the question Nina :) I prefer map() in this case since I feel like it fits my purpose better than for each Hallah :) — camillalofroth, Mar 14 '20 at 10:37
Can you explain more FZ? I looked at your example and its not written in ES6 witch is what I want to use. — camillalofroth, Mar 14 '20 at 10:40
[Don't use `sort` to shuffle`](https://bost.ocks.org/mike/shuffle/compare.html). — Bergi, Mar 14 '20 at 11:01

score 1 · Answer 1 · answered Mar 14 '20 at 10:41

1

As I understand you can do:

{shuffleAndPick(images, 3).map((image) => (
        <div className="key" key={image.id}>
        <h3>{image.name}</h3>
        <h3>{image.sanskritname}</h3>
        <p>{image.description}</p>
        <img src={image.image} alt={image.name} />
        </div> 
      ))}

answered Mar 14 '20 at 10:41

strdr4605

3,796
2
16
26

Thank you both! :) It is something like that I want to acheive. But none of the examples are working. Are there any difference if the array consists in object or not? I am pretty new to this and It could be more accurate to say that I am using props. – camillalofroth Mar 14 '20 at 11:03

score 1 · Answer 2 · answered Mar 14 '20 at 10:46

You can just do this. This will help you to obtain the desired results. (Expected that you have an array of Objects!).

{shuffleAndPick(images, amount).map((image) => (
    <div className="key" key={images.id}>
    <h3>{images.name}</h3>
    <h3>{images.sanskritname}</h3>
    <p>{images.description}</p>
    <img src={images.image} alt={images.name} />
    </div> 
  ))}

How to use map() with another function in ES6?

2 Answers2