I'm making a table that shows data
const [body, setBody] = useState<JSX.Element[]>()
const reduxSelectorValue = useSelector(state => state.someReducer.value) // [4,5,6,7]
const [thisState, setThisState] = useState<number[]>([1])
useEffect(()=>{
setThisState(reduxSelectorValue)
)
},[reduxSelectorValue])
useEffect(() => {
setBody(
thisState.map((value: number, index: number) => (
<div
onClick={() => {
setThisState((thisState) => {
const newThisState = thisState.slice()
newThisState[index] = newThisState[index] + 1 - 3
return newThisState
})
}}
>
{value}
</div>
)),
)
}, [thisState])
render(
<ATableElement body={body}/>
)
When I click button there's no change on body
How should I have to do it with this problem?
Try this correction:
const reduxSelectorValue = useSelector(state => state.someReducer.value)
// [4,5,6,7]
const [thisState, setThisState] = useState<number[]>([1])
useEffect(()=>{
setThisState(reduxSelectorValue)
)
},[reduxSelectorValue])
body(list){
let bodyContent = list.map((value: number, index: number) => (
<div
onClick={() => {
setThisState((thisState) => {
const newThisState = thisState.slice()
newThisState[index] = newThisState[index] + 1 - 3
return newThisState
})
}}
>
{value}
</div>
))
return <ATableElement body={bodyContent}/>
}
render(
return body(thisState)
)
Here's how you might approach the problem.
Have one state where you're storing the array of numbers.
map over the state to create the buttons. You can make them children of the ATableElement if you need to have a container made from another component.
When a click listener is called call the handleClick function. This works out the index of the button within the container, copies the state, and then updates the index of that new state. You can then set the state with that updated array.
const { useEffect, useState } = React;
function Example() {
const [ state, setState ] = useState([1, 2, 3, 4]);
useEffect(() => console.log(state), [state]);
function handleClick(e) {
// Destructure the children from the parent of
// the element that was clicked (ie
// all the input elements)
const { parentNode: { children } } = e.target;
// Find the index of the button that was clicked
const index = [...children].indexOf(e.target);
// Copy the state
const newState = [...state];
// Toggle the boolean at the index of
// the `newState` array
newState[index] = state[index] + 1 - 3;
// Update the state
setState(newState);
}
return (
<ATableElement>
{state.map(n => {
return (
<button
onClick={handleClick}
>Click {n}
</button>
)
})}
</ATableElement>
);
};
function ATableElement({ children }) {
return <div>{children}</div>
}
ReactDOM.render(
<Example />,
document.getElementById('react')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>