React map function - return one item at random

Question

I have an array and I would like to display one item from the array at random within my render function. Here's what I have now which shows all items:

render() {
    return (
        <article className="rand-product-cont">
            {this.state.products && this.state.products.map((product, index) => (
            <article key={index} className="rand-product">
                <h3>"{product.name}"</h3>
            </article>
            ))}
        </article>
    );
};

How can I modify this to show only one product from the array at random? I tried this based on another question I found but it seems to display the same product every time:

render() {
    const product = this.state.products.sort(() => Math.random() - Math.random()).slice(0, 1);
    return (
        <article className="rand-product-cont">
            {product && product.map((product, index) => (
            <article key={index} className="rand-product">
                <h3>"{product.name}"</h3>
            </article>
            ))}
        </article>
    );
};

Does this answer your question? Getting a random value from a JavaScript array — djfdev
– djfdev, Commented Dec 13, 2019 at 21:11
If you just want one value, then .map() should not be involved. — Pointy
– Pointy, Commented Dec 13, 2019 at 21:17

norbitrial · Accepted Answer · 2019-12-13 21:31:28Z

4

Your random generator works like charm. The issue is how you render the product what your code picked from products array.

Try the following without map:

render() {
    const product = this.state.products.sort(() => Math.random() - Math.random())
                                       .find(() => true);

    return (
        <article className="rand-product-cont">
            {product &&
                <article className="rand-product">
                    <h3>"{product.name}"</h3>
                </article>
            }
        </article>
    );
};

The above solution is using similar approach what I have here, representing products array with only number values, find returns the first element, so you don't need to use indexer on products array:

const array = [12,23,43,45,34,22,77];
const element = array.sort(() => Math.random() - Math.random())
                     .find(() => true);

console.log(element);

I hope this helps!

edited Dec 13, 2019 at 21:31

answered Dec 13, 2019 at 21:15

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user13286 Over a year ago

Thank you, I think this is close to what I need. However when I do this nothing is being displayed and I think it's because product is still an array with one item. Can I just do {product[0].name}?

norbitrial Over a year ago

That's true, sort returns an array. Let me update my answer.

norbitrial Over a year ago

@user13286 I have change a bit, removed slice and added find method which gives you back the first product from the sorted array.

user13286 Over a year ago

Something strange I noticed is that when I resize my browser window, the random product that is being displayed is changing in real-time. Is there a way to prevent that from happening? The page should pick a single product at random on load and it should continue displaying that same product until the page is reloaded.

Ertan Kara · Accepted Answer · 2019-12-13 21:17:12Z

1

If you need only one element and if it's going to be random. I don't see point of using map at all

  function getRandomElFromArray(arrayLenght) {
    return Math.floor(Math.random() * arrayLength);
  }

  <article ...
    {
      product && product.length > 0 &&
      product[getRandomElFromArray(product.length)]
    }
  </article>

answered Dec 13, 2019 at 21:17

Ertan Kara

3263 silver badges14 bronze badges

Collectives™ on Stack Overflow

React map function - return one item at random

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related