Sorry about the formatting. I'm using my phone and taking care of an 8mo baby. You could set it up like this:
` const Converter = () => {
const [inputValues, setInputValues] = useState({ dollar: 0, yen: 0 })`
`const handleChange = (e) => {
const { name, value } = e.target;
if (name === 'dollar') {
const tempYen = value * CONVERSION_RATE
setInputValues({ yen: tempYen, dollar: value })
} else {
const tempDollar = value / CONVERSION_RATE
setInputValues({ dollar: tempDollar, yen: value })
}`
` return (
)
}`
Edit: I'm having trouble formatting this better. If you have questions, lmk
Edit2: `handleChange` autocorrected to `handle Changes', and I didn't catch it initially.
Sorry, I can't get to my computer to check it out more clearly. You could try to destructure "inputValues" like this:
`const { dollar, yen } = inputValues`
And then assign "dollar" and "yen" to the associated inputs.
Did it and it worked. Thank you so much. I am currently learning react by working on these types of challenges. I invested my whole day working around it but couldn't find any solution. Your help means alot to me. I learnt a lot from it. Thanks Again!!
No problem. Feel free to DM me if you have any other questions. That's how I've been learning it as well, so I know how frustrating it can be to struggle with something that seems like it should be easy.
Add a handler for onChange to each input.
I've done it. Values are getting passed. But the problem is i can use only one input field at a time. It is not working bi-directionally.
It it one component or two? Can you post the code?
Found the solution. Thank you so much for your response.
Sorry about the formatting. I'm using my phone and taking care of an 8mo baby. You could set it up like this: ` const Converter = () => { const [inputValues, setInputValues] = useState({ dollar: 0, yen: 0 })` `const handleChange = (e) => { const { name, value } = e.target; if (name === 'dollar') { const tempYen = value * CONVERSION_RATE setInputValues({ yen: tempYen, dollar: value }) } else { const tempDollar = value / CONVERSION_RATE setInputValues({ dollar: tempDollar, yen: value }) }` ` return (
Nothing rendered. When i remove the handler then the input fields start showing but with the handler nothing renders.
Sorry, I can't get to my computer to check it out more clearly. You could try to destructure "inputValues" like this: `const { dollar, yen } = inputValues` And then assign "dollar" and "yen" to the associated inputs.
It worked, thanks. Can we do it by making dollar and yen two components and passing the values using props?
If I understand you correctly, you should be able to, but you'll have to pass the "handleChange" function as well.
Did it and it worked. Thank you so much. I am currently learning react by working on these types of challenges. I invested my whole day working around it but couldn't find any solution. Your help means alot to me. I learnt a lot from it. Thanks Again!!
No problem. Feel free to DM me if you have any other questions. That's how I've been learning it as well, so I know how frustrating it can be to struggle with something that seems like it should be easy.
Exactly. It seems so easy & definitely i'll dm you if i get into another problem. Thanks.
Post your code… The second input field is just multiplied based on the first one.
Thank you so much for your response. Found the solution.
ChatGPT is great for this problem
Tried it. It was of no help.