How to observe and chance multiple text field states at once?

[mainrs]

My application is a number converter. There is a text field for binary, hex, decimal, octal and ASCII. On a fresh page load all fields are empty.

Now, whenever the user enters a text snippet into one of the fields, I want my application to calculate and fill out the text in every other field.

Example: The user enters the value 112 into the decimal field. Then the binary field would contain 1110000, the hex field would contain 0x70, the ASCII field p and so forth...

How can I implement this in yew properly? My approach would be a state struct holding every value as a string. But I cannot think of a solution that doesn't involve a lot of code duplication.

For example a setter method per type of input, like calc_state_from_hex that transforms every other field based on its argument:

struct State {
  hex_value: String,
  decimal_value: String,
  binary_value: String,
  // ...
}

impl State {
  pub fn calc_from_hex(&mut self, value: String) {
    self.hex_value = ...;
    self.binary_value = ...;
    // ...
  }
}

[wiseaidev]

You mean something like:

vokoscreenNG-2023-11-25_23-21-31.mp4

I encountered a similar challenge while working on input-yew. I needed a mechanism to modify flags based on the phone number being entered. My solution involves utilizing the value, on_input, and ref attributes of the input tag. Take a look at this specific section of the code: Code Section.

And check out the associated HTML tags here: HTML Tags.

By applying a similar approach to your current problem, assuming you are using functional components because it is 2023 btw, you should be able to build your converter effectively.

Demo: https://yew-converter.netlify.app/
Repo: https://github.com/wiseaidev/yew-converter

Regarding the duplicate code, a smart trick is to try something called currying. I haven't tried it out in Rust and Yew yet, but I've given it a shot in React before:

const handleChange = (prop) => (event) => {
  setValues({ ...values, [prop]: event.target.value });
};

And then you can set up an onChange event listener like this:

onChange={(e) => {
  handleChange("firstName")(e);
  // ...
}}

This way, you're making use of the handleChange function to handle the changes, keeping your code tidy and avoiding code duplication.

Here, "values" is a JavaScript object, and as you pointed out, it could be similar to a struct that wraps up all the different states. However, I'm not entirely sure about the details of setting up a currying handle change callback in Yew, but it's doable.

[mainrs]

Almost, yes! What I also need is it to be bidirectional. So if you would enter a binary number into the binary field, the decimal field would also update as well.

[wiseaidev]

It is bidirectional, check out the demo:

vokoscreenNG-2023-11-26_11-36-13.mp4

Demo: https://yew-converter.netlify.app/
Repo: https://github.com/wiseaidev/yew-converter

[mainrs]

Thanks!