My Levels component contains a list of Level components that gets rendered in the UI.
A level is basically a list of items.
From my Levels component, I pass a function to my Level component. Inside the Level component there is a button, when clicked, will call the function I passed from my Levels component called createInnerRange.
So when you click the button, it creates a new list of items.
The new list that was just created also has that button, when clicked should create another list.
The bug is, when the newly created list is rendered, and I click the button to create a new list, it creates a new list but it overwrites the first list I that was just created.
Why is this happening? I am always appending to the Levels state whenever a new Level is created.
import React, { ReactElement, useEffect, useState } from 'react';
export interface LevelProps {
innerRangeHandler?: (a: number, b: number) => void;
}
export interface LevelsState {
levels: Array<LevelProps>;
};
const initialState: LevelsState = {
levels: [],
};
function Levels() {
const [state, setState] = useState<LevelsState>(initialState);
const addLevel = (props: LevelProps) => {
console.log('add level called');
setState({
...state,
levels: [...state.levels, props]
})
}
const newLevelOnClick = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
addLevel({name: "none"});
}
const createInnerRange = (high: number, low: number) => {
addLevel({ name: `inner-${high}:${low}`, high: high, low: low, innerRangeHandler: createInnerRange});
}
return (
<div>
<div className="flex flex-row">
<div className="flex-[3]">
<div className="flex flex-row">
{state.levels.map((props, i) =>
<div className="m-1" key={`${props.name}-${i}`}><Level {...props} /></div>
)}
</div>
</div>
</div>
</div>
);
}
export default Levels;
my Level component has a button, the onClick handler looks like:
const levelButton = (index: number) => (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
const button: HTMLButtonElement = event.currentTarget;
console.log(`clicked level with index=${index}`);
props.innerRangeHandler!(a, b);
}
