javascript - recursion method returning undefined

Question

I'm writing something where you can generate a random number, and it checks if its in an array, if it is, it generates a different one until a unique is found and adds that into the array and so on. For some reason it returns undefined after recursively running itself. why?

returning 2 index.js:26 retrieved 2

index.js:26 found a duplicate 2

index.js:26 returning 1

index.js:26 retrieved undefined

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const MAX = 3;

class Clickity extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      numbers: []
    }
  }

  generateRand = () => {
    // generate a random number 1 - MAX (3)
    let rand = Math.floor(Math.random() * MAX + 1);
    let { numbers } = this.state;

    // if length of array is equal to max return 0
    if (numbers.length === MAX) return 0;

    // check if generated number is in array
    if (numbers.includes(rand)) {
      console.log(`found a duplicate ${rand}`)
      // recursively run method
      this.generateRand();
    } else {
      // return the random number
      console.log(`returning ${rand}`)
      return rand;
    }
  }

  addNewNumber = () => {
    let id = this.generateRand();
    console.log(`retrieved ${id}`)
    let { numbers } = this.state;
    numbers.push(id);
    this.setState({ numbers });
  }

  render() {
    return (
      <div>
        <a onClick={() => this.addNewNumber()}>Generate unique number</a>
        <ul>{this.state.numbers.map((num) => <li>{num}</li>)}</ul>
      </div>
    )
  }
}

function App() {
  return (
    <Clickity />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

You don't return this.generateRand()