How to return true or false individually in code using .map()?-CodePudding

I get the data in the form of an array, and I use the .map() method to manage one state. I want to create an array that changes values individually, but it keeps moving as one. Help me.


    function Follow() {
  const [isFollow, setIsFollow] = useState([]);

  const handleChangeButton = idx => {
    const newIsFollow = [...isFollow];
    newIsFollow[idx] = !newIsFollow[idx];
    setIsFollow(newIsFollow);
  };

  return (
    <FollowWrapper>
      <Title>
        <h5>follw</h5>
      </Title>
      <ul ref={ref}>
        {users.map((info, idx) => {
          return (
            <li key={idx}>
              <UserContainer>
                <UserInfo onClick={() => moveDetailPage(info.product_seq)}>
                  <UserImage
                  />

                  <TextWrapper>
                    <p>
                      <strong>{info.homepage_name}</strong>
                      <br />
                      {info.wholesale_client_id}
                    </p>
                  </TextWrapper>
                </UserInfo>
                <ButtonWrapper>
                  <FollowButton
                    isFollow={isFollow[users.length - 1]}
                    value={users.length - 1}
                    onClick={() => {
                      handleChangeButton(users.length - 1);
                    }}
                  >
                    follw
                  </FollowButton>
                </ButtonWrapper>
              </UserContainer>
            </li>
          );
        })}
      </ul>
      <NavHeightBox />
    </FollowWrapper>
  );
}

How can I get the data and manage the state values individually? I tried to designate the state value individually, but it doesn't seem like a good way because I don't know how many data will come in.

CodePudding user response：

You don't appear to be passing the correct "index" value to your FollowButton props or the handleChangeButton. You are effectively passing the last index (users.length - 1) to all of them. Use the mapped idx value.

const handleChangeButton = idx => {
  const newIsFollow = [...isFollow];
  newIsFollow[idx] = !newIsFollow[idx]; // <-- passed index
  setIsFollow(newIsFollow);
};

...

{users.map((info, idx) => {            // <-- current index
  return (
    <li key={idx}>
      <UserContainer>
        ...
        <ButtonWrapper>
          <FollowButton
            isFollow={isFollow[idx]}   // <-- current index
            value={idx}                // <-- current index
            onClick={() => {
              handleChangeButton(idx); // <-- current index
            }}
          >
            follow
          </FollowButton>
        </ButtonWrapper>
      </UserContainer>
    </li>
  );
})}

Update

Since the isFollow array is initially empty, you can update any index you please and it will lead to undefined "holes" in the array until you "fill them in" by toggling the value there. undefined is a falsey value, so the negation is a truthy value. If you desire you can initialize the isFollow state to match the users array.

const [isFollow, setIsFollow] = useState(Array(users.length).fill('N'));

...

const handleChangeButton = idx => {
  const newIsFollow = [...isFollow];
  newIsFollow[idx] = newIsFollow[idx] === "Y' ? 'N' : 'Y';
  setIsFollow(newIsFollow);
};

IMO it would be simpler and more trivial to just keep isFollow a boolean type for easy toggling and derive in the UI what the "Y"/"N" value should be from the boolean state values.