Question 33809 in React native Question posted in
The official React Native documentation can be found here.

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

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.
Tags:

3

Answers


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

    }

    missing parenthesis on the getRandomInt

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

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

    };

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search