react useState with JSX.Element-CodePudding

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?

CodePudding user response：

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>

CodePudding user response：

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