We Keep Coding

Out of sync state and view

Facing a strange issue with the latest stable releases of Nextjs and React, where state and view updates are out-of-sync.
Example (v1): using useMemo
import { useState, useMemo } from "react";
const items = [
{ id: 1, name: "apple" },
{ id: 2, name: "orange" },
{ id: 3, name: "mango" }
];
export default function IndexPage() {
const [desc, setDesc] = useState(true);
const sortedItems = useMemo(() => [...(desc ? items : items.reverse())], [
desc
]);
return (
<div>
<button onClick={() => setDesc((s) => !s)}>change order</button>
<br />
<span>desc: {desc.toString()}</span>
<pre>{JSON.stringify(sortedItems, null, 2)}</pre>
</div>
);
}
Example (v2): using useState
import { useState, useMemo } from "react";
const items = [
{ id: 1, name: "apple" },
{ id: 2, name: "orange" },
{ id: 3, name: "mango" }
];
export default function IndexPage() {
const [state, setState] = useState({ desc: true, items });
function handleSort() {
setState((s) =>
s.desc
? { desc: false, items: [...items.reverse()] }
: { desc: true, items: [...items] }
);
}
return (
<div>
<button onClick={handleSort}>change order</button>
<br />
<span>desc: {state.desc.toString()}</span>
<pre>{JSON.stringify(state.items, null, 2)}</pre>
</div>
);
}
Package versions:
"next": "12.1.6",
"react": "18.2.0",
"react-dom": "18.2.0",
As you can see from the output below, array elements are not updated on the view front based on the current sort state (in both the examples). Multiple clicks are required to do so.
Is this a random bug or am I fooling myself!?
CodeSandbox - Contains both code examples

Calling .reverse on a list will mutate it. Then wherever you reference that list again, it will be reversed.
You don't need to copy the items on to state either, you only need the isReversed state.
const Comp = () => {
const [isReversed, setIsReversed] = useState(false);
const toggle = () => setIsReversed(r => !r);
const list = useMemo(() => isReversed ? [...items].reverse() : items, [isReversed]);
// use list
}

From the useState example, separating the states for checking if it has been sorted and state for holding the items would be a great start.
import { useState } from "react";
const items = [
{ id: 1, name: "apple" },
{ id: 2, name: "orange" },
{ id: 3, name: "mango" },
];
export default function IndexPage() {
const [areSorted, setAreSorted] = useState(false);
const [itemsArr, setItemsArr] = useState(items);
function handleSort() {
setAreSorted(!areSorted);
setItemsArr(itemsArr.reverse());
}
return (
<div>
<button onClick={handleSort}>change order</button>
<br />
<span>{"Desc : " + areSorted}</span>
<pre>{JSON.stringify(itemsArr, null, 2)}</pre>
</div>
);
}

Convert class component to functional component in React

I'm learning React hooks so in order to do that I'm trying to convert a class component to a functional component but I still get some errors.
Here is the original working component written as a class:
import React, { Component } from 'react';
import NavBar from './components/navbar';
import Counters from './components/counters';
class App extends Component {
state = {
counters: [
{ id: 0, value: 5 },
{ id: 1, value: 1 },
{ id: 2, value: 2 },
],
};
handleDelete = (counterId) => {
const counters = this.state.counters.filter((c) => c.id !== counterId);
this.setState({ counters });
};
handleReset = () => {
const counters = this.state.counters.map((c) => {
c.value = 0;
return c;
});
this.setState({ counters });
};
handleIncrement = (counter) => {
const counters = [...this.state.counters];
const index = counters.indexOf(counter);
counters[index] = { ...counter };
counters[index].value++;
this.setState({ counters });
};
render() {
return (
<React.Fragment>
<NavBar
totalCounters={this.state.counters.filter((c) => c.value > 0).length}
/>
<main className='container'>
<Counters
counters={this.state.counters}
onReset={this.handleReset}
onDelete={this.handleDelete}
onIncrement={this.handleIncrement}
/>
</main>
</React.Fragment>
);
}
}
export default App;
And this is the converted version which uses hooks.
import React, { useState } from 'react';
import NavBar from './components/navbar';
import Counters from './components/counters';
const App = () => {
const [counters, setCounters] = useState([
{ id: 0, value: 5 },
{ id: 1, value: 1 },
{ id: 2, value: 2 },
]);
const handleDelete = (counterId) => {
const counterss = counters.filter((c) => c.id !== counterId);
setCounters({ counterss });
};
const handleReset = () => {
const counterss = counters.map((c) => {
c.value = 0;
return c;
});
setCounters({ counterss });
};
const handleIncrement = (counter) => {
const counterss = [...counters];
const index = counterss.indexOf(counter);
counterss[index] = { ...counter };
counterss[index].value++;
setCounters({ counterss });
};
return (
<React.Fragment>
<NavBar totalCounters={counters.filter((c) => c.value > 0).length} />
<main className='container'>
<Counters
counters={counters}
onReset={handleReset}
onDelete={handleDelete}
onIncrement={handleIncrement}
/>
</main>
</React.Fragment>
);
};
export default App;
Most of it works fine but it keeps throwing an error saying that filter is not a function. Here it is the message:
TypeError: counters.filter is not a function

The main culprit appears to be the way you are updating your state, which is like this:
setCounters({ counterss });
This will actually set your counters state to an object with the property counterss, so your state will contain the following:
{ counterss: [/* rest of the array */] }
The exact error being thrown is referring to the fact that you are attempting to call .filter on an object instead of an array. To fix this issue you should simply update your state like this:
setCounters(counterss);

setCounters({ counterss })
should be
setCounters(counterss)

It throws an error because you set the new state as an object setCounters({ counterss });. But you want an array: setCounters(counterss);. This way it won't throw an error the second time setCounters is called.

React Shared Counter Increment

I am trying to achive a shared counter between components for example
I have 3 buttons
<Button />
<Button />
<Button />
and each of them has a label that will show a number when its clicked on it
when I click one of them it will start by 1 and only the one i clicked will show that number 1 and others will be 0 or no label at all then if i click other button that button wil show 2 on it
and previous one will stay at 1 and so on when i click third button it will have state of 3
which is a shared state between 3 same component instance
I am trying to achive a gallery image selection by this i will show a label selected items and their order by numbers on it how to achive it with react hooks

Sharing logic between siblings can be handled via a parent component that passes callback functions to each child.
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
interface AppProps { }
interface AppState {
photos: PhotoData[];
}
type PhotoData = { id: number; name: string; }
type GalleryProps = { photos: PhotoData[] }
const Gallery : React.FunctionComponent<GalleryProps> = ({
photos
}) => {
// Create an array to store the unique ID of the selected "photos".
// As items are selected they will be inserted into the array in the order
// they were selected.
const [selected, setSelected] = React.useState<number[]>([]);
// Create a function to handle the selection of a button.
const onSelect = React.useCallback((selectedId?: number) => {
setSelected(currentSelected => {
// If item already in the array, remove it.
if (currentSelected.some(id => id === selectedId)) {
return currentSelected.filter(id => id !== selectedId);
}
// if item not in the array, add it.
return [...currentSelected, selectedId ]
});
}, [setSelected])
return (
<div>
{
!!photos && photos.map(photo => {
// find the selection order using index.
const index = selected.indexOf(photo.id);
// change index to 1 based (or undefined if not selected).
const selectionOrder = index >= 0 ? index + 1 : undefined
return (
<Photo
key={photo.id}
{...photo}
onClick={onSelect}
index={selectionOrder}
/>
);
})
}
</div>
);
}
type PhotoProps = PhotoData & { index?: number; onClick: (selectedId: number) => void; }
const Photo : React.FunctionComponent<PhotoProps> = ({
id,
name,
onClick,
index
}) => {
// Create function to handle button click.
const onButtonClick = React.useCallback(() => {
onClick(id)
}, [onClick, id])
return (
<button
onClick={onButtonClick}
>
{name} {!!index && `(Selected ${index})`}
</button>
);
};
class App extends Component<AppProps, AppState> {
constructor(props) {
super(props);
this.state = {
photos: [
{
id: 1,
name: 'Photo 1'
},
{
id: 2,
name: 'Photo 2'
},
{
id: 3,
name: 'Photo 3'
}
]
};
}
render() {
return (
<div>
<Gallery photos={this.state.photos} />
</div>
);
}
}
render(<App />, document.getElementById('root'));
Runnable Version of the above.

React Hooks: Shuffle array immediately on load, and onClick

I have an array that I am trying to shuffle on initial load, and onClick. My functions seem to be working but aren't visible unless there is a page rerender.
2 issues I'm trying to resolve:
I want to shuffle on initial load, but the shuffle doesn't occur unless there is a rerender.
I want to shuffle on button press, but the shuffle doesn't occur unless there is a rerender.
Here is my CodeSandbox
Thanks
import React, {
useEffect,
useState
} from "react";
const myArray = [{
name: "cat",
count: 0
},
{
name: "dog",
count: 0
},
{
name: "hamster",
count: 0
},
{
name: "lizard",
count: 0
}
];
function shuffle(arra1) {
var ctr = arra1.length,
temp,
index;
while (ctr > 0) {
index = Math.floor(Math.random() * ctr);
ctr--;
temp = arra1[ctr];
arra1[ctr] = arra1[index];
arra1[index] = temp;
}
return arra1;
}
function App(props) {
const [list, setList] = useState(myArray);
useEffect(() => {
const mountArray = shuffle(myArray);
setList(mountArray);
}, []);
function handleShuffle() {
const changes = shuffle([...list]);
setList(changes);
console.log("Shuffle", myArray, changes);
}
return (
<div>
{list.map((x, index) => (
<div key = {x.name + x.index}>
{x.name} - {x.count}
<button onClick={() => setList([...list], (x.count = x.count + 1))}>
+
</button>
</div>
))}
<button onClick={handleShuffle}>
Shuffle
</button>
</div>
);
}
export default App;

HAI i have made some changes in App.js
import React, { useEffect, useState } from "react";
const myArray = [
{ name: "cat", count: 0 },
{ name: "dog", count: 0 },
{ name: "hamster", count: 0 },
{ name: "lizard", count: 0 }
];
function shuffle(arra1) {
var ctr = arra1.length,
temp,
index;
while (ctr > 0) {
index = Math.floor(Math.random() * ctr);
ctr--;
temp = arra1[ctr];
arra1[ctr] = arra1[index];
arra1[index] = temp;
}
return arra1;
}
function App(props) {
const [list, setList] = useState(myArray);
useEffect(() => {
const mountArray = shuffle(myArray);
setList(mountArray);
}, []);
function handleShuffle() {
const changes = shuffle([...list]);
setList(changes);
console.log("Shuffle", myArray);
}
return (
<div>
{list.map((x, index) => (
<div key={x.name + x.index}>
{x.name} - {x.count}
<button onClick={() => setList([...list], (x.count = x.count + 1))}>
+
</button>
</div>
))}
<button onClick={handleShuffle}>Shuffle</button>
</div>
);
}
export default App;

Your setList function is used to modify the array and returns a new array, with shuffled values, so you need to apply that function non initial rendering.
useEffect(() => {
setList(shuffle(myArray))
}, []);

Html changes only if the state has changed, so make some state inside a component, and update it every time you want to update the html.
function App(props){
const [myArray, setMyArray] = useState([])
// rest of the code
}

How to change an object value of a state array by using a specific array index

I'm trying to change the value of an object key from a state array using setState. The change should be in such a way that only a specific value of object should be changed from the array of index i. This index is passed as follows
import React from "react";
import {Button} from 'react-bootstrap';
class StepComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{
step: "Step1",
visited: false
},
{
step: "Step2",
visited: false
},
{
step: "Step3",
visited: false
}
]
};
}
nextStep(i) {
//Change the visited value of object from data[i] array from false to true
//Something like below
this.setState({
data[i]:visited to true
})
}
render(){
let visitSteps = this.state.data;
return(
<div>
{visitSteps.map((visitedStep, index) => (
<div key={index}>
<p>{visitedStep.step}</p>
<Button onClick={() => this.nextStep(i)}>Continue</Button>
</div>
))}
</div>
)
}
}
export default StepComponent
As per the example given aboove on each onClick event the the value of that particular object value of visited is changed from false to true

You can create a variable with the array equals to your data, change the index passed as input and then call a set state passing the new array.
nextStep(i) {
let visitesList = [...this.state.data];
visitesList[i].visited = true;
this.setState({
data: visitesList
})
}
If you just want one step to be true at a time you can use a map function
nextStep(i) {
this.setState({
data: this.state.data.map((e, index) => {
e.visited = i === index;
return e;
})
});
}
Also, when calling the nextStep on the Button, call it by using nextStep(index)

Change specific object property of array.
class App extends React.Component {
state = {
data:[
{
step: "Step1",
visited: false
},
{
step: "Step2",
visited: false
},
{
step: "Step3",
visited: false
}
]
};
handleClick = item => {
const { data } = this.state;
let obj = data.find(a => a.step === item.step);
obj.visited = true;
let filtered = data.filter(a => a.step !== item.step);
this.setState({ data: [obj, ...filtered] });
};
render() {
console.log(this.state.data);
return (
<div>
{this.state.data.map(a => (
<button key={a.step} style={{ color: a.visited ? "red" : "" }} onClick={() => this.handleClick(a)}>
{a.step}
</button>
))}
</div>
);
}
}
Live Demo