Render Random Item from State React.JS

Question

Given some items stored in state, I want to be able to click a button and display a random item from that array. So far it only works on the first click and then it displays the same one letter after the first click.

What exactly is going on?

import React, { Component } from 'react'

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      notes: ['hey', 'yo', 'sup'],
      clicked: false
    }
  }

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

  render() {    
    return (
      <div className="App">
        <button onClick={this.handleClick}>Random Note</button>
        <h1>{this.state.clicked ? this.state.notes : ''}</h1>
      </div>
    )
  }
}

what did you expect to happen? this.state.notes is an array, but then in your handleClick function you're making notes a string — azium
– azium, Commented Apr 7, 2018 at 18:43
You REWRITE notes by one random note. Add one more field f e randomNode: null and write random note in it and display it in render(). — Igor S
– Igor S, Commented Apr 7, 2018 at 19:32

Igor S · Accepted Answer · 2018-04-07 20:26:55Z

2

Add selected note handling

import React, { Component } from 'react'

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      notes: ['hey', 'yo', 'sup'],
      selectedNote: null,
      clicked: false
    }
  }

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

  render() {    
    return (
      <div className="App">
        <button onClick={this.handleClick}>Random Note</button>
        <h1>{this.state.clicked && this.state.selectedNote}</h1>
      </div>
    )
  }
}

edited Apr 7, 2018 at 20:26

answered Apr 7, 2018 at 19:33

Igor S

9698 silver badges19 bronze badges

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

Comments

Donny West · Accepted Answer · 2018-04-07 18:44:44Z

1

You're overwriting the notes array in state in your handleClick method. Try using a different key (something like activeNote) in handleClick, then use that in your render method rather than this.state.notes.

answered Apr 7, 2018 at 18:44

Donny West

7203 silver badges6 bronze badges

1 Comment

RogerFedFan Over a year ago

Thanks for the reply. I'm not sure what you mean exactly. Could you give me a little code snippet?

RogerFedFan · Accepted Answer · 2018-04-07 19:15:38Z

0

So I think I solved it.

I ended up adding another state key randomWord and setting it equal to ''.

I then set the state of randomWord to that of this.state.notes when randomized.

Finally, I rendered this.state.randomWord

No clue if that's the correct approach but it's a working solution, lol.

answered Apr 7, 2018 at 19:15

RogerFedFan

5661 gold badge10 silver badges36 bronze badges

Collectives™ on Stack Overflow

Render Random Item from State React.JS

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related