How to useState hooks with array-CodePudding

I am not able to push the number index in the array of useState. Where I am going wrong, do I want to push the index of numbers when I click them? I am extracting the previous state array and then I push new but nothing happens. How to push a new element inside useState array React hook? My code doesn't work!! Please someone check.

Game.js

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import RandomNumber from "./RandomNumber";

export default function Game(props) {
  const [state, setstate] = useState([]);
  let randomNumber = Array.from({ length: props.randomNumberCount }).map(
    () => 1   Math.floor(10 * Math.random())
  );
  let target = randomNumber
    .slice(0, props.randomNumberCount - 2)
    .reduce((acc, curr) => acc   curr, 0);
  const isNumberSelected = (numberIndex) => {
    return state.indexOf(numberIndex) >= 0;
  };
  const selectNumber = (numberIndex) => {
    setstate((arr) => [...arr, numberIndex]);
  };
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Target Sum Game</Text>
      <Text style={styles.target}>{target}</Text>
      <View style={styles.randomContainer}>
        {randomNumber.map((randomNumber, index) => (
          <RandomNumber
            key={index}
            id={index}
            number={randomNumber}
            isSelected={isNumberSelected(index)}
            onClick={() => selectNumber}
          />
        ))}
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ddd",
    paddingTop: 30,
  },
  target: {
    fontSize: 30,
    backgroundColor: "#aaa",
    margin: 50,
    marginHorizontal: 70,
    textAlign: "center",
  },
  header: {
    fontSize: 35,
    backgroundColor: "dodgerblue",
    textAlign: "center",
    marginHorizontal: 30,
    marginTop: 50,
  },
  randomContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-around",
  },
});

RandomNumber.js

import React from "react";
import { StyleSheet, Text, TouchableOpacity } from "react-native";

export default function RandomNumber(props) {
  const handlePress = () => {
    props.onClick(props.id);
  };
  return (
    <TouchableOpacity onPress={handlePress()}>
      <Text style={[styles.random, props.isSelected && styles.selected]}>
        {props.number}
      </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  random: {
    backgroundColor: "#999",
    width: 100,
    marginHorizontal: 35,
    marginVertical: 25,
    fontSize: 35,
    textAlign: "center",
  },
  selected: {
    opacity: 0.3,
  },
});

CodePudding user response：

You need to change the onClick prop and pass the randomNumber (or index depending of what you want to do) to the selectNumber function:

// Not sure if you want to pass randonNumber or index but you get the idea
onClick={() => selectNumber(randomNumber)}

CodePudding user response：

you are not calling the function

onClick={() => selectNumber(index)}

CodePudding user response：

<TouchableOpacity onPress={handlePress()}>

should be

<TouchableOpacity onPress={()=>handlePress()}>

and

() => selectNumber

should be

() => selectNumber()

please try it