I want only one component state to be true between multiple components-CodePudding

I am calling components as folloews

{userAddresses.map((useraddress, index) => {
            return (
              <div key={index}>
                <Address useraddress={useraddress} />
              </div>
            );
})}

Their state:

const [showEditAddress, setShowEditAddress] = useState(false);

and this is how I am handling their states

const switchEditAddress = () => {
    if (showEditAddress === false) {
      setShowEditAddress(true);
    } else {
      setShowEditAddress(false);
    }
  };

CodePudding user response：

Well, it's better if you want to toggle between true and false to use the state inside useEffect hook in react.

useEffect will render the component every time and will get into your condition to set the state true or false.

In your case, you can try the following:

useEffect(() => {  if (showEditAddress === false) {
  setShowEditAddress(true);
} else {
  setShowEditAddress(false);
} }, [showEditAddress])

By using useEffect you will be able to reset the boolean as your condition. Also find the link below to react more about useEffect. https://reactjs.org/docs/hooks-effect.html

CodePudding user response：

It would be best in my opinion to keep your point of truth in the parent component and you need to figure out what the point of truth should be. If you only want one component to be editing at a time then I would just identify the address you want to edit in the parent component and go from there. It would be best if you gave each address a unique id but you can use the index as well. You could do something like the following:

UserAddress Component

const UserAddress = ({index, editIndex, setEditIndex, userAddress}) => {
  return(
    <div>
      {userAddress}
      <button onClick={() => setEditIndex(index)}>Edit</button>
      {editIndex === index && <div style={{color: 'green'}}>Your editing {userAddress}</div>}
    </div>
  )
}

Parent Component

const UserAddresses = () => {
  const addresses = ['120 n 10th st', '650 s 41 st', '4456 Birch ave']
  const [editIndex, setEditIndex] = useState(null)

  return userAddresses.map((userAddress, index) => <UserAddress key={index} index={index} editIndex={editIndex} setEditIndex={setEditIndex} userAddress={userAddress}/>;
}

Since you didn't post the actual components I can only give you example components but this should give you an idea of how to achieve what you want.