Get a unique item from list in react native?

Question

Here is my list:

newdiscoverPlanet: [
  require('../img/sunp.png'),
  require('../img/twopp.png'),
  require('../img/bluep.png'),
  require('../img/purplep.png'),
  require('../img/bluepurplep.png'),
  require('../img/redp.png'),
  require('../img/orangep.png')

],

I put all of this into a function then use Math here:

getRandomPlanet = () =>{
  var planetItem = this.state.newdiscoverPlanet[Math.floor(Math.random()*this.state.newdiscoverPlanet.length)];
  this.setState({
    changePlanet: planetItem,
  });
}

And then I put them into tabs to get a unique image from the list:

    _renderTabIndicator() {
       let tabs = [{
               text: `${this.state.tags.toLowerCase()}`,
               iconSource: `${this.state.changePlanet}`
           },{
               text: `${this.state.tags2.toLowerCase()}`,
               iconSource: `${this.state.changePlanet}`
           },{
               text: `${this.state.tags3.toLowerCase()}`,
               iconSource: `${this.state.changePlanet}`
       }];
       return <PagerTabIndicator tabs={tabs} />;
   }

But everytime I load the page I get the same image from each source. Is there a way to make them unique? How can I do something like this in React Native: https://stackoverflow.com/a/2380113/9318643

This is a little confusing.. are you expecting `this.state.changePlanet` to have different values for each tab? — azium, Mar 10 '19 at 18:59
well that's like saying `var a = 1` then expecting `a` to not equal `1`. You're not setting 3 different values, you're setting a value and using that value 3 times. You don't need any state for this you could just call `this.state.newdiscoverPlanet[Math.floor(Math.random()*this.state.newdiscoverPlanet.length)]` where `iconSource` is... `iconSource: ` — azium, Mar 10 '19 at 19:03
mind you, that will get you different values, not necessarily unique. but you should start there — azium, Mar 10 '19 at 19:03
But wouldn't there be a chance where the images will be the same as each other in a different iconSource? — Laney Williams, Mar 10 '19 at 19:05

jsdeveloper · Accepted Answer · 2019-03-10T20:16:31.470

The problem is that you are accessing the same value (this.state.changePlanet) 3 times and expecting a different result. I think you just need to make the method return a random planet like so:

getRandomPlanet = () => {
  return this.state.newdiscoverPlanet[Math.floor(Math.random()*this.state.newdiscoverPlanet.length)];
}

then you can call this 3 times and you will get 3 different images:

_renderTabIndicator() {
       let tabs = [{
               text: `${this.state.tags.toLowerCase()}`,
               iconSource: this.getRandomPlanet()
           },{
               text: `${this.state.tags2.toLowerCase()}`,
               iconSource: this.getRandomPlanet()
           },{
               text: `${this.state.tags3.toLowerCase()}`,
               iconSource: this.getRandomPlanet()
       }];
       return <PagerTabIndicator tabs={tabs} />;
   }

Edit: If you want to ensure that no two same planets are chosen, you might do something like this:

getRandomPlanets = (n) => {

  // Shuffle array
  const shuffled = this.state.newdiscoverPlanet.sort(() => 0.5 - Math.random());

  // Get sub-array of first n elements after shuffled
  let selected = shuffled.slice(0, n);
  return selected;
}

and then to call:

_renderTabIndicator() {
  const planets = this.getRandomPlanets(3);
  let tabs = [{
                   text: `${this.state.tags.toLowerCase()}`,
                   iconSource: planets[0]
               },{
                   text: `${this.state.tags2.toLowerCase()}`,
                   iconSource: planets[1]
               },{
                   text: `${this.state.tags3.toLowerCase()}`,
                   iconSource: planets[2]
           }];
           return <PagerTabIndicator tabs={tabs} />;
       }

Get a unique item from list in react native?

1 Answers1