Generate a random number and add to an array to be rendered in React Native

Question

I have written some basic JS code in React Native to generate a random number then render the number. I would now like to add every generated number to a list.

Currently the generated random number can be added to a list, to do this I need to first generate the number (using

onPress={getRandomInt}

) THEN to add to the list on a separate button:

onPress={addNumber}

.

I've tried combining the functions and for the life of me can't get it to work. Any help would be much appreciated, thank you.

import React, { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';
import Calls from './Calls';

export default function NumberGen() {


    const [number, setNumber] = React.useState();
    const [names, setNames] = React.useState([]);

    const getRandomInt = (min, max) => {

        min = Math.ceil(1);
        max = Math.floor(90);

        const randomNumber = Math.floor(Math.random() * (max - min +1) + min);
        setNumber(randomNumber)
    }

  const addNumber = () => {
    getRandomInt
    setNames(current => [...current, number]);
  }


  return (
    <>
    <View>

        <Button
        title='get random number'
        onPress={getRandomInt}
        />
    <Text>{number}</Text>
    <Text>{Calls.call[number-1]}</Text>
</View>
<Button title='add to list' onPress={addNumber}/>

<View>
  {names.map((element) => {
    return(

      <Text>{element}</Text>
    )
  })}
</View>
    </>
  );
};

I've tried:

Adding a new array to state
Combining both functions
Using .then after the random number is generated but before it's set to state.

why are you calling getRandomInt in addNumber without passing any parameters — Vin Xi, Nov 23 '22 at 11:23

score 0 · Answer 1 · answered Nov 23 '22 at 11:27

0

 const addNumber = () => {
getRandomInt()
setNames(current => [...current, number]);

}

missing parenthesis on the getRandomInt

answered Nov 23 '22 at 11:27

Yosi Leibman

386
3
16

Blo0dy brilliant, I can't believe I missed that. Thank you! – tpies Nov 23 '22 at 14:30
That's happening a lot..., Feel free to upvote :) – Yosi Leibman Nov 24 '22 at 15:05

score -1 · Answer 2 · answered Nov 23 '22 at 11:28

You have declared the function getRandomInt, which you are passing to the onPress function, which will call the function when you press the button. Which of course works as expected.

const getRandomInt = (min, max) => {

        min = Math.ceil(1);
        max = Math.floor(90);

        const randomNumber = Math.floor(Math.random() * (max - min +1) + min);
        setNumber(randomNumber)
    }

The problem which I understand is that you want to combine both functions into one click.

const addNumber = () => {
    getRandomInt()
    setNames(current => [...current, number]);
  }

In order to call the function, you need parenthesis after the name. You have arguments min and max in as parameters but since you've initialized them in your function, it is not necessary to pass them.

score -2 · Answer 3 · answered Nov 23 '22 at 11:40

update your function like this

const getRandomInt = (min, max) => {
min = Math.ceil(1);
max = Math.floor(90);
const randomNumber = Math.floor(Math.random() * (max - min + 1) + min);
setNumber(randomNumber);
return randomNumber;

};

const addNumber = () => {
if (names.length > 0) {
  const updateValue = getRandomInt();
  setNames(current => [...current, updateValue]);
} else {
  setNames(current => [...current, number]);
}

};

Generate a random number and add to an array to be rendered in React Native

3 Answers3