Reputation: 23

How to useState hooks with array

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

Upvotes: 1

Answers (4)

DhavalR

Reputation: 159

Might Be This Helpful:

Home.Js

import React, {useState, useEffect} from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import RandomNumber from './RandomNumber';

const Home = props => {
  const [state, setstate] = useState([]);

  useEffect(() => {
    console.log('state', state);
  }, [state]);

  let randomNumber = Array.from({length: 10}).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 => {
    console.log('numberIndex', 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) => {
          return (
            <RandomNumber
              key={index}
              id={index}
              number={randomNumber}
              isSelected={isNumberSelected(index)}
              onClick={() => selectNumber(randomNumber)}
            />
          );
        })}
      </View>
    </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: {},
});

export default Home;

RandomNumber.js

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

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

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

Output Log:

output

Upvotes: 0

Nima Ka

Reputation: 163

<TouchableOpacity onPress={handlePress()}>

should be

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

and

() => selectNumber

should be

() => selectNumber()

please try it

Upvotes: 0

TheWuif

Reputation: 1036

you are not calling the function

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

Upvotes: 1

jean182

Reputation: 3505

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

Upvotes: 0

How to useState hooks with array

Answers (4)

Related Questions