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

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.

CodePudding user response：

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

}

missing parenthesis on the getRandomInt

CodePudding user response：

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.

CodePudding user response：

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]);
}

};