React 如何通过单击更改我的组件

Question

I have a component ( Card ) and it have a icon in right-up corner. When i click that icon i want to it change to another component ( EditCard ) for edit it. That Card components is coming with mapping on my datas. And when i set state for change it like :

const [editVisible, seteditVisible] = useState(false);
.
.
.
{datax &&
          datax.map((x) => {
            return (
              <div key={x._id}>
                {editVisible === false && (
                  <div>
                    <div className="flex">
                      <Link
                        className="hover:text-current w-full "
                        to={{
                          pathname: `${APP_PREFIX_PATH}/collections/${x._id}`,
                        }}
                      >
                        <Card data={x} />
                        <br />
                      </Link>
                      <span
                        className="ti-pencil-alt  relative right-8 top-2 text-lg"
                        onClick={() => {
                          seteditVisible(true);
                        }}
                      ></span>
                    </div>
                  </div>
                )}
                {editVisible === true && (
                  <div>
                    <div className="flex">
                      <div className="w-full">
                       <EditCard data={x} />
                      </div>
                    </div>
                  </div>
                )}
              </div>
            );
          })}

Yes its working and changing component, but its changing for all of my Cards. I want to change only which i click. How can i make it ? For make it more clear Screenshots :

My Cards : https://prnt.sc/1artutf

When i click right-top corner icon ( One of card icon only ) : https://prnt.sc/1arv7f7

Answer 1

Instead of seteditVisible(true) in your onClick, what you can do is pass x._id.

onClick={() => seteditVisible(x._id)}

and in your render you can

{datax && datax.map((x) => {
            return (
              <div key={x._id}>
                {editVisible === x._id && (
                  <div>
                    <div className="flex">
                    ...
                    ...
                    ...
                 )}
                 {editVisible !== x._id && (
                  <div>
                  ...
                  ...
                  </div>
                  )}
)}
)};

you can further simply with a ternary block.

{editVisible === x._id ? (
     <>
     JSX
     </>
   ) : (
     <>
     JSX
     </>
)}

Answer 2

I think you want to create another state like const [flipStatus, setFlipStatus] = useState([dataX.map((element) => false)}]) to hold a value for each element in the array and have a handleClick function like so

const handleClick = (index) => {
        const newflipStatus = [...flipStatus]
        newflipStatus[index] = !flipStatus[index]
        setFlipStatus(newflipStatus);
    }

and have that flippedStatus on the map function FlipStatus[index] === true && ... I think this could be a way of start thinking for a solution, have a look at this answer also