Q:

React.js random name generator giving weird cycling through array on scroll

I have a random name generator that is supposed to pull one name (or object) from an array and post it when the dom loads.  It works however I found out when I scroll it cycles through the entire array which it's not supposed to do.  
So the error is the dom loads, one name (or object) is pulled from the array and displays.  However when you scroll it continuously pulls other names and writes it in the dom instead.
Here is the code that's giving me the grief:
The Array
const names = [
  'Yoda',
  'Jack Sparrow',
  'Captain Kirk',
  'Spock',
  'Optimus Prime',
  'Gandalf',
  'Inigo Montoya',
  'Magneto',
  'Tony Stark',
  'Bilbo Baggins',
  'Legolas',
  'Inspector Clouseau',
  'Obi Wan'
];

The Generator
class Container extends Component {
  constructor() {
    super();
    this.state = {};
    this.getRandomName = this.getRandomName.bind(this);
  }
  getRandomName() {
    return names[Math.floor(Math.random() * names.length)];
  }

Where it's written to in the DOM
<Author>
 {this.getRandomName()}
</Author>

The Error
When I scroll, {this.getRandomName()} grabs a new name from the array and writes it to the dom.  Not sure why.

A:

You should save the name in the state, otherwise you'll generate a new name on every render:
class Container extends Component {
  constructor() {
    super();
    this.state = {
      name: this.getRandomName()
    };
  }
  getRandomName() {
    return names[Math.floor(Math.random() * names.length)];
  }

-
<Author>
 {this.state.name}
</Author>

