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.
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>
);
})}
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.