Home / Questions / 276982
Accepted
Ceci Benitez
Asked: 2020-07-06 06:10:40 +0800 CST 2020-07-06 06:10:40 +0800 CST

Why does my random method return undefined?

  • 772

I am working with an array of phrases and in the class AppI have in componentDidMountit setStateand all that but my function selectQuoteIndexreturns undefined. In quotesData.js I have an array of objects with two properties, one is quote and the other is author, then in that same file I have a method getQuotesthat returns the array of quotes.

import React, { Component } from 'react';
import { random } from 'lodash';
import { getQuotes } from './services/quotesData';
import Button from './components/button';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      quotes: [],
      selectedQuoteIndex: null
    }

    this.selectQuoteIndex = this.selectQuoteIndex.bind(this);
  }

  componentDidMount() {
    this.setState({ quotes: getQuotes(), selectedQuoteIndex: this.selectQuoteIndex() })
  }

  selectQuoteIndex() {
    if(!this.state.quotes.length) {
      return;
    }
    return random(0, this.state.quotes.length - 1);
  }

  render() { 
    console.log(this.state.selecetedQuoteIndex);

    return (  
    <div className="App" id = "quote-box">
      <Button buttonDisplayName = "Next Quote" clickHandler = {this.selectQuoteIndex} />
    </div>
    );
  }
}
 
export default App;

javascript

1 Answers

  1. Best Answer

    This code is the cause

    if(!this.state.quotes.length) {
  return;
}

    When the component is mounted it is initialized with a state that has a property quotesthat is an empty array and therefore thelength === 0

    this.state = {
  quotes: [], // El quotes se inicializa aquí
  selectedQuoteIndex: null
}

    So if we run your code we have to

    if(!0) { // !0 = true
   return undefined;
}

    When you deny the 0it returns truebecause the 0is a value falseyand therefore the one return;that is equivalent to is executed return undefined;since in javascript the functions always return something and since you do not specify anything that something is undefined.

    I think your code is fixed if you remove the negation:

    selectQuoteIndex() {
    if(this.state.quotes.length) {
        return random(0, this.state.quotes.length - 1);
    }
}

    Not putting a returnin some conditions is the same as writing that's return undefinedwhy I didn't write it.

    • 4