axisj / react-multi-email

:octocat: A simple react component to format multiple email as the user types.
https://react-multi-email.vercel.app/
MIT License
298 stars 72 forks source link

Not working value change #153

Closed Bttlg closed 1 year ago

Bttlg commented 1 year ago

My initial value: ["test@gmail.com", "test5@gmail.com"]

I get emails from excel file... Result: ["smileofhades9@gmail.com", "adsfasf@gmail.com", "aslkj@gmail.com"]

But don't work re-render getLabel function. Still showing old value... ["test@gmail.com", "test5@gmail.com"] My state value changed. ["test@gmail.com", "test5@gmail.com"] -> ["smileofhades9@gmail.com", "adsfasf@gmail.com", "aslkj@gmail.com"]

It was working fine two days ago.

thomasJang commented 1 year ago

Hello. Please show me the react-multi-email usage code. Thanks

Bttlg commented 1 year ago

MyState structure: const [participants, setParticipants] = useState({ participant1: ["smileofhades9@gmail.com"], participant2: null })

It's my code setting code: const setImportedEmailToParticipants = (importedEmails) => { let newParts = { ...participants,

};
setParticipants(newParts);

};

Screenshot 2023-08-12 at 16 12 07
thomasJang commented 1 year ago
setParticipants({...newParts});

If the key value in the object is changed, JS does not recognize it as a new value. I think it will probably work if I use it as above. If possible, I think it's better not to use the email value as an object key.

Bttlg commented 1 year ago

It's not working. I aspirant this way.

it's my state... const [changedEmails, setChangedEmails] = useState([]);

setChangedEmails([...importedEmails]); or setChangedEmails(importedEmails);

config: emails={changedEmails}

It's my result. But still re-render not working. Screenshot 2023-08-14 at 09 32 03 Do you have any ideas?

134130 commented 1 year ago

Hi @Bttlg , your intent is not working because react-multi-email is just using emails props with useState which only initializing the values.

If you want to change emails, you should re-render the react-multi-email now.

@thomasJang I think we can support dynamic props changing with useEffect hook. How do you think about this?


// propsEmails: string[] | undefined
const [emails, setEmails] = React.useState<string[]>(() => initialEmailAddress(propsEmails));

// Add hook
useEffect(() => {
  setEmails(propsEmails || []);
}, [propsEmails]);
thomasJang commented 1 year ago

Thank you very much, @134130

And @Bttlg I'm sorry I didn't check the problem exactly. There is a problem with the code, so it is being modified. It will be fixed soon.

HyeongSeoku commented 1 year ago

@Bttlg is the issue has been resolved ?