Rendering random array element from state (React Native)

Question

I'm trying to render a random array item from state so that (e.g - [0] might change to [2] on reload.]

Here is what I tried so far, any tips or ideas please?

here is my state:

     state = {
      randomItem: ['one', 'two', 'three', 'four'],
    },
    selected: null,
    clicked: false,
  };

here is my handleClick function which will randomise the items grabbed from array

  handleClick = () => {
    this.setState({
      clicked: true,
      selected: this.state.randomItem.selected[
        Math.floor(Math.random() * this.state.selected.length)
      ],
    });
  };

here is how im trying to return it

         <View>
            <TouchableOpacity onPress={this.handleClick}>
              <Text>{this.state.clicked && this.state.selected}</Text>
            </TouchableOpacity>
          </View>

Are selected and clicked part of your state? They don't look like they are from your snippet. Mind sharing the entire component? — Drew Reese
– Drew Reese, Commented Jan 17, 2020 at 1:44

Sharna J · Accepted Answer · 2020-05-17 06:23:37Z

3

I believe you meant to say randomItem instead of randomStatus in handleClick().

Try changing handleClick() like so:

    handleClick = () => {
    this.setState(prev => ({
      ...prev,
      clicked: true,
      selected:
        prev.randomItem[Math.floor(Math.random() * prev.randomItem.length) + 0]
    }));
  };

Also, I think your state has a typo as well. It should be:

    state = {
    randomItem: ["one", "two", "three", "four"],
    selected: null,
    clicked: false
  };

edited May 17, 2020 at 6:23

answered Jan 17, 2020 at 1:50

Sharna J

1495 bronze badges

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

2 Comments

UnluckyLAD Over a year ago

Great, thank you! Now, another question. Is it possible to use the same handleClick to have two different outputs? e.g one text might render "One" and another Text might render "Four" Or will I need to modify or have a separate script to achieve that

Sharna J Over a year ago

Add selected1 and selected2 to state.

Collectives™ on Stack Overflow

Rendering random array element from state (React Native)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related