I have an array of images inside refData. I then map them into an array of img objects with RefItem. I then want thouse specifc images to change to the next one in a line - so img 0 becomes 1, and 1 becomes 2 - as written in refbox. I just cannot figure this one out.. I just want to update the individual numbers in each array item?
import React, {useState, useEffect} from 'react'
import refData from './refData'
import RefItem from './refItem'
function ReferencesPP(){
const refItems = refData.map(item => <RefItem key={item.id} pitem={item}/>)
const [refs, setRefs] = useState([0, 1, 2, 3])
useEffect(() => {
const intervalId = setTimeout(() => {
for(let i = 0; i < refs.length; i++){
if(refs[i] !== refData.length){
setRefs(...refs[i], refs[i] = refs[i] + 1)
} else {
setRefs(...refs[i], refs[i] = 0)
}
}
}, 2000);
return () => clearTimeout(intervalId);
}, [refs]);
return(
<div className="referencespp-container">
<div className="background-container" />
<div className="content-container">
<div id="refbox">
{refItems[refs[0]]}
{refItems[refs[1]]}
{refItems[refs[2]]}
{refItems[refs[3]]}
</div>
</div>
</div>
)
}
export default ReferencesPP
I thought it would be as simple, as writing
const refs = [0, 1, 2, 3]
useEffect(() => {
const intervalId = setInterval(() => {
for(let i = 0; i < refs.length; i++){
if(refs[i] !== refData.length){
refs[i] = refs[i] + 1;
} else {
refs[i] = 0;
}
}
}, 2000);
return () => clearInterval(intervalId);
}, []);
but doing that only updates the const and not the {refItems[refs[0]]} elements?
Have a look at this https://jsfiddle.net/gwbo4pdu/ I think it's what you want to get
React.useEffect(() => {
const intervalId = setTimeout(() => {
const newRefs = [...refs]
const i = newRefs.shift()
newRefs.push(i)
setRefs(newRefs);
}, 2000);
return () => clearTimeout(intervalId);
}, [refs]);
P.S. you can do just newRefs.push(newRefs.shift())
Related
Whilst I am doing cart in react, I have no idea why I keep getting NaN value - only from a specific object data.
When I have the following data list:
#1 ItemsList.js
export const ItemsList = [
{
id: 1,
name: "VA-11 Hall-A: Cyberpunk Bartender Action",
price: 110000,
image: cover1,
link: "https://store.steampowered.com/app/447530/VA11_HallA_Cyberpunk_Bartender_Action/?l=koreana",
},
...
{
id: 6,
name: "Limbus Company",
price: 110000,
image: cover6,
link: "https://limbuscompany.com/",
},
];
And the following code, please look at the comment line.
#2 Goods.jsx
import React, { useContext } from "react";
import "./Goods.css";
import { DataContext } from "../../components/context/DataContext";
export const Goods = (props) => {
const { id, name, price, image, link } = props.shopItemProps;
const { cartItems, addItemToCart, removeItemFromCart } =
useContext(DataContext);
const cartItemStored = cartItems[id];
return (
<div className="goods">
<div className="goods-id">{id}</div>
<img src={image} alt="thumbnail_image" className="goods-image" />
<div className="goods-name">{name}</div>
<div className="goods-price">${price}</div>
<button>
<a href={link} className="goods-link">
Official Store Page
</a>
</button>
<div className="cart-button">
<button onClick={() => removeItemFromCart(id)}>-</button>
// ★Maybe here? but why do I get NaN only for id:6? Others work well.
{cartItemStored > -1 && <> ({cartItemStored}) </>}
<button onClick={() => addItemToCart(id)}>+</button>
</div>
</div>
);
};
What should I do to solve NaN? There seems to be no way to make that value as int in this case. Or do you see any problem from the above code block?
Edited
Sorry for confusing you. Here are the additional code related.
#3. DataContext.js (where cartItems state exists)
import React, { createContext, useState } from "react";
import { ItemsList } from "../ItemsList";
export const DataContext = createContext(null);
const getDefaultCart = () => {
let cart = {};
for (let i = 1; i < ItemsList.length; i++) {
cart[i] = 0;
}
return cart;
};
export const DataContextProvider = (props) => {
const [cartItems, setCartItems] = useState(getDefaultCart);
const checkoutTotalSum = () => {
let totalAmount = 0;
for (const item in cartItems) {
if (cartItems[item] > 0) {
let itemInfo = ItemsList.find((product) => product.id === Number(item));
totalAmount += cartItems[item] * itemInfo.price;
}
}
return totalAmount;
};
const addItemToCart = (itemId) => {
setCartItems((prev) => ({ ...prev, [itemId]: prev[itemId] + 1 }));
};
const removeItemFromCart = (itemId) => {
setCartItems((prev) => ({ ...prev, [itemId]: prev[itemId] - 1 }));
};
const updateCartItemCount = (newAmount, itemId) => {
setCartItems((prev) => ({ ...prev, [itemId]: newAmount }));
};
const contextValue = {
cartItems,
addItemToCart,
removeItemFromCart,
updateCartItemCount,
checkoutTotalSum,
};
// console.log(cartItems);
return (
<DataContext.Provider value={contextValue}>
{props.children}
</DataContext.Provider>
);
};
The issue is in the function you are using to set the initial value of cartItems, more specifically, in the for loop. This line is the culprit: i < ItemsList.length, when in your case, it should be i <= ItemsList.length. Why? because you are not including the last element of ItemsList on the cart object (you are initializing the i counter with 1 and ItemsList's length is 6).
So, when you call addItemToCart:
const addItemToCart = (itemId) => {
setCartItems((prev) => ({ ...prev, [itemId]: prev[itemId] + 1 }));
};
And try to update the value corresponding to the last element of ItemsList which is 6 in cartItems, you're getting: '6': undefined + 1 because again, you did skip the last element in the for loop. This results in NaN.
You also have the option of initializing i with 0 and preserve this line: i < ItemsList.length, or:
for (let i = 1; i < ItemsList.length + 1; i++) {
...
}
EDIT:
Hello guys,
my jsx looks like this
import { DataGrid, GridColDef, GridValueGetterParams } from '#mui/x-data-grid';
import React, { useState, useEffect } from 'react';
import { getNameOfJSDocTypedef, WatchDirectoryFlags } from '../../../node_modules/typescript/lib/typescript';
// ==============================|| MOB ||============================== //
let first_run = true;
var columns = [];
var rows = [];
const Mob = () => {
const [antDataColumns, setAntDataColumns] = useState([]);
const urlAntColumns = "QUERYURL";
const [antData, setAntData] = useState([]);
const urlAnt = 'QUERYURL';
useEffect(() => {
fetch(urlAntColumns)
.then((response) => {
return response.json();
})
.then((data) => {
setAntDataColumns(data);
});
}, []);
useEffect(() => {
fetch(urlAnt)
.then((response) => {
return response.json();
})
.then((data) => {
setAntData(data);
});
}, []);
if (antDataColumns.length > 0 && antData.length > 0 && first_run === true) {
columns.push({ field: 'id', headerName: 'ID', width: 70 })
for (let i = 6; i < 12; i++){
columns.push({field: antDataColumns[i]['column_name'], headerName: antDataColumns[i]['column_name'], width: 70});
}
for (let i = 0; i < 20; i++){
let row = {};
row["id"] = i+1;
for (let j = 1; j < columns.length; j++) {
row[columns[j]['field']] = antData[i][columns[j]['field']];
}
rows.push(row);
}
first_run = false;
}
console.log("---------------------------------------------------------------------------------------------------------")
console.log(columns)
console.log("---")
console.log(rows)
console.log("---------------------------------------------------------------------------------------------------------")
return (
<div style={{ height: 1000, width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
pageSize={10}
rowsPerPageOptions={[10]}
checkboxSelection
/>
</div>
)
};
export default Mob;
The table does not show up. But the data is loaded after a few seconds... I don't understand why shows nothing. Im using MATERIAL UI. Data Grid.
The 'columns' and 'rows' look like this
But I get a error and not output. Maybe because fetch is not finished when the website is rendering...
Thats the error
You can stop the component from rendering its content, based on a condition from your state.
const [antDataColumns, setAntDataColumns] = useState([]);
useEffect(() => {
...
}, []);
if (!antDataColumns.length) return null;
console.log("X")
Or you can create a second state : a loading state, that is true while the request is processed and false when it is finished.
I want to create simple 2048 game application. My initial board is composed of 16 array elements.
The generate() function generates a value of '2' in a random empty element
It works just fine and creates one random '2' for me, but the problem starts when I want to call it twice in a handler like this:
const handleNewGame = () => {
generate()
generate()
}
I've read about prevState but have no idea how to implement it in this batch of code to work properly.
Here is my game component:
const width = 4;
const Game = () => {
const [Board, setBoard] = useState([]);
const createBoard = () => {
let initialBoard = [];
for (let i = 0; i < width * width; i++) {
initialBoard.push("");
}
return initialBoard;
};
const generate = () => {
let board = [...Board];
let randomNumber = Math.floor(Math.random() * Board.length);
console.log(randomNumber);
if (board[randomNumber] === "") {
board[randomNumber] = 2;
setBoard(board);
} else generate()
};
const handleNewGame = () => {
generate()
generate()
}
useEffect(() => {
setBoard(createBoard);
console.log(`Board Created!`);
}, []);
return (
<div className="game-container">
<button onClick={handleNewGame}>NewGame</button>
<div className="game">
{Board.map((value, index) => (
<div className="tile" key={index}>
{value}
</div>
))}
</div>
</div>
);
};
export default Game;
I'll be glad for the answer.
setState(), named setBoard() in your code is asynchronous, whatch this great video on the Event Loop for you to understand more: https://www.youtube.com/watch?v=8aGhZQkoFbQ.
See if this will suit your needs:
import { useEffect, useState } from 'react';
const width = 4;
const Game = () => {
const [Board, setBoard] = useState([]);
const createBoard = () => {
let initialBoard = [];
for (let i = 0; i < width * width; i++) {
initialBoard.push('');
}
return initialBoard;
};
const randomBoardPosition = () => {
return Math.floor(Math.random() * Board.length);
};
const generate = () => {
let board = createBoard();
let randomNumber = randomBoardPosition();
let positionsFilled = 0;
while (positionsFilled < 2) {
if (board[randomNumber] === '') {
board[randomNumber] = 2;
positionsFilled++;
} else {
randomNumber = randomBoardPosition();
}
}
setBoard(board);
};
const handleNewGame = () => {
generate();
};
useEffect(() => {
setBoard(createBoard);
console.log(`Board Created!`);
}, []);
return (
<div className="game-container">
<button onClick={handleNewGame}>NewGame</button>
<div className="game">
{Board.map((value, index) => (
<div className="tile" key={index}>
{value}
</div>
))}
</div>
</div>
);
};
export default Game;
Just us function instead of value
const generate = () => {
setBoard(Board => {
let board = [...Board];
while (true) {
let randomNumber = Math.floor(Math.random() * Board.length);
console.log(randomNumber);
if (board[randomNumber] === "") {
board[randomNumber] = 2;
break
}
}
}
}
I have the following component:-
import React, { useState, useEffect } from "react"
import Card from "./Card"
import joker from "../../assets/joker.png"
import goalie from "../../assets/goalie.png"
import defender from "../../assets/defender.png"
import midfielder from "../../assets/midfielder.png"
import attacker from "../../assets/attacker.png"
const CardsBoard = () => {
const deckLimits = {
joker: 4, goalkeepers: 12, defenders: 12, midfielders: 12, attackers: 12
};
const [ratingObj, setRatingObj] = useState({});
const [visible1, setVisible1 ] = useState(false);
const [visible2, setVisible2 ] = useState(false);
const [deck, setDeck] = useState([]);
const [deck1, setDeck1] = useState([]);
const [deck2, setDeck2] = useState([]);
const [currCardPl1, setCurrCardPl1] = useState({});
const [currCardPl2, setCurrCardPl2] = useState({});
useEffect(() => {
generateDeck();
distributeCards();
}, [deck]);
const startGame = () => {
//reset decks
setDeck([]);
setDeck1([]);x
setDeck2([]);
//generate the card’s values
generateDeck();
if (deck.length > 0) {
distributeCards();
if (currCardPl1 != undefined){
console.log(currCardPl1);
//unMask ratings of Player 1
setVisible1(true);
setVisible2(false);
}
}
};
const distributeCards = () => {
//randomize the deck
deck.sort(() => Math.random() - 0.5);
//distribute 26 cards at random when the game start
const splitDeck1 = deck.slice(0, 26);
const splitDeck2 = deck.slice(26, 52);
//add this card to the deck
splitDeck1.map((card) => {
setDeck1(deck1 => [...deck1, card]);
});
//add this card to the deck
splitDeck2.map((card) => {
setDeck2(deck2 => [...deck2, card]);
});
//queue the first card to Player 1
setCurrCardPl1(deck1[0]);
//queue the first card to Player 2
setCurrCardPl2(deck2[0]);
};
const generateDeck = () => {
for (let i = 0; i < deckLimits.joker; i++) {
generateCard('joker');
};
for (let i = 0; i < deckLimits.goalkeepers; i++) {
generateCard('goalkeeper');
};
for (let i = 0; i < deckLimits.defenders; i++) {
generateCard('defender');
};
for (let i = 0; i < deckLimits.midfielders; i++) {
generateCard('midfielder');
};
for (let i = 0; i < deckLimits.attackers; i++) {
generateCard('attacker');
};
}
const generateCard = item => {
const card = {
player: 0,
image: getImage(item),
title: item.toUpperCase(),
ratings: [
{ title: "Handling", rating: "99" },
{ title: "Reflexes", rating: "99" },
{ title: "Defending", rating: "99" },
{ title: "Strength", rating: "99" },
{ title: "Passing", rating: "99" },
{ title: "Flair", rating: "99" },
{ title: "Finishing", rating: "99" },
{ title: "Composure", rating: "99" },
],
}
//add this card to the deck
setDeck(deck => [...deck, card]);
}
const getImage = item => {
switch (item) {
case "joker":
return joker;
case "goalkeeper":
return goalie;
case "defender":
return defender;
case "midfielder":
return midfielder;
case "attacker":
return attacker;
default:
break;
}
};
return (
<div className="container-fluid justify-content-center">
<div className="row">
<div className="col-md-6">
<div>
<h4>Player 1</h4>
</div>
<Card
cardInfo={currCardPl1}
showRatings={visible1}
onClick={ratingObj => setRatingObj(ratingObj)}
/>
</div>
<div className="col-md-6">
<h4>Player 2</h4>
<Card
cardInfo={currCardPl2}
showRatings={visible2}
onClick={ratingObj => setRatingObj(ratingObj)}
/>
</div>
</div>
<div className="row top-buffer">
<div className="col-md-12 text-center">
<button
id="startGameBtn"
name="StartGameButton"
className="btn btn-secondary"
onClick={() => startGame()}
>
START GAME
</button>
</div>
</div>
</div>
)
}
export default CardsBoard
And I am getting the error:-
Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
I am suspecting it has to do something with the Submit button (onClick) which is calling the setState multiple times, however I cannot seem to fix the problem.
So I have the following questions :-
How can I fix the onClick()?
I would like to click on the Start Game button, and trigger generateDeck(); and distributeCards(); so that I get the deck, deck1 and deck2 filled up. Is there a way to do it? At the moment I have created a useEffect() which is dependant on the deck being filled up, is that the correct way to doing it with hooks?
Thanks for your help and time!
You have deck as a dependency in your useEffect hook. That means generateDeck will run every time the deck is updated. However, generateDeck calls generateCard, which calls setDeck. That causes deck to change, which means you're stuck in a sort of infinite loop. You should tie generateDeck to the onClick handler or some other event which will not be triggered by deck changing.
Also, be careful with this:
deck.sort(() => Math.random() - 0.5)
Calling sort will mutate your state directly, which is something you should avoid in React. Try something like setDeck(d=>[...d].sort(/* Your sorting function here */)) instead.
You are using setDeck() in distrubuteCards and in your useEffect hook, you call again the distributeCards
const distributeCards = () => {
// bla bla
setDeck(deck => [...deck, card]);
}
Which results in calling the hook all the time.
useEffect(() => {
generateDeck();
distributeCards();
}, [deck]);
deck.sort(() => Math.random() - 0.5);
You have a problem here.
Save it inside a variable. Otherwise you update the state all the time it's called.
The problem simply is, i have a shuffle function that shuffles array of numbers,
the numbers rendered as cards in a deck, the app is simple, it needs when clicking two cards with same number, they get the same color.
so i created a state which is an array which receives only two cards to compare, once comparing is complete, the array length returns to 0 then push two cards again and so on.
now the problem is shuffle function works again and again every time state is updated and this makes cards re-render every time with different numbers(shuffled)
code:
const icons = [1, 2, 3, 4, 1, 2, 3, 4, 5, 6, 7, 8, 5, 6, 7, 8];
const shuffle = (cards) => {
let counter = cards.length;
// While there are elements in the array
while (counter > 0) {
// Pick a random index
let index = Math.floor(Math.random() * counter);
// Decrease counter by 1
counter--;
// And swap the last element with it
let temp = cards[counter];
cards[counter] = cards[index];
cards[index] = temp;
}
return cards;
}
const shuffledCards = shuffle(icons);
const [cards, setCards] = useState([]);
const [isCorrect, checkCorrect] = useState(false)
const addCard = (card) => {
if (cards.length < 2) {
setCards([...cards, card]);
}
if(cards.length === 2) {
compareCards(cards);
setCards([]);
}
}
const compareCards = (cards) => {
if(cards[0] === cards[1] ) {
checkCorrect(true);
}
}
return (
<div className="App">
<Game shuffledCards={shuffledCards} addCard={addCard} />
</div>
);
}
const Game = (props) => {
const { shuffledCards, addCard } = props;
return (
<div className="game">
<div className="deck">
{
shuffledCards.map((c, i) => {
return (
<div className="card" key={i} onClick={() => addCard(c)}>{c}</div>
);
})
}
</div>
</div>
)
}
export default App;
you can use useEffect:
const [cards, setCards] = useState([]);
useEffect(()=>{shuffle()},[cards])