当多个组件在 React 中使用 state 时，如何仅使用 state 渲染单个组件？

Question

I'm currently using state to display/hide an icon in my SwipeRow , but when I swipe one row, the icon becomes visible on all the rows, because the icons all reference that same state, so my question was how do I display the icon only on the row swiped?

I was thinking maybe I can utilize index somehow in .map() , like wrap StyledContainer with a ternary using index , I'm not sure. Any ideas on how to achieve this? If you have a method without using state, that's also fine.

const foobar = content.map((object, index) => {
  return (
    <SwipeRow
       onRowOpen={() => setSwiped(true)}
       onRowClose={() => setSwiped(false)}
    >
          <StyledContainer swiped={isSwiped}>  <-- This is where it's displayed/hidden
              <Icon />
          </StyledContainer>
            
    </SwipeRow>
 )})

Answer 1

You will have to maintain a state for all Swipe rows. Maybe a map or an object. Something like this.

    const [swiped, setSwiped] = React.useState({});
    const content = content.map((object, index) => {
      const id = object.id;
      return (
        <SwipeRow
           onRowOpen={() => setSwiped((oldSwipe) => { oldSwipe.id = true; return oldSwipe;})}
           onRowClose={() => setSwiped((oldSwipe) => { oldSwipe.id = false; return oldSwipe;})}
        >
              <StyledContainer swiped={swiped[id]}>  <----- This is where it's displayed/hidden
                  <Icon />
              </StyledContainer>
                
        </SwipeRow>
     )})