The trait `IntoPropValue<std::option::Option<implicit_clone::unsync::string::IString>>` is not implemented for `yew::Callback<yew::Event, bool>`

1

I'm very new to Rust programming. I am learning to use it and Yew framework for a web project, I am now stuck on how to make the webpage input validation work.

Here is my code for implementing an input.rs component that is used in a login form.

#[derive(Properties, PartialEq, Validate, Clone)]
pub struct InputProps {
    pub label: String,
    pub input_type: AttrValue,
    pub name: String,
    pub value: String,
    pub onchange: Callback<Event>,
    pub validate_function: Callback<String,bool>,
}

#[function_component(Input)]
pub(crate) fn input(props: &InputProps) -> Html {
    let html_id = format!("input-{}", props.name.clone());
    let validate_function = props.validate_function.clone();
    let validate_function_callback = Callback::from(move |event: Event| {
        let target = event.target().unwrap().dyn_into::<HtmlInputElement>().unwrap();
        let value = target.value();
        validate_function.emit(value)
    });

   
    html! {
        <>
            <label for={html_id.clone()}>{props.label.clone()}</label>
            <input 
                id={html_id} 
                type={props.input_type.clone()} 
                name={props.name.clone()} 
                value={props.value.clone()}
                onchange={props.onchange.clone()}
                validate_function={validate_function_callback}
            />  
        </>             
    }
}

When I try to build it, it always gives me this error:

error[E0277]: the trait bound `yew::Callback<yew::Event, bool>: IntoPropValue<std::option::Option<implicit_clone::unsync::string::IString>>` is not satisfied                      
  --> src\components\input.rs:54:36
   |
54 |                 validate_function={validate_function_callback}
   |                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^ the trait `IntoPropValue<std::option::Option<implicit_clone::unsync::string::IString>>` is not implemented for `yew::Callback<yew::Event, bool>`
   |
   = help: the following other types implement trait `IntoPropValue<T>`:
             <bool as IntoPropValue<ChildrenRenderer<VNode>>>
             <char as IntoPropValue<ChildrenRenderer<VNode>>>
             <isize as IntoPropValue<ChildrenRenderer<VNode>>>
             <i8 as IntoPropValue<ChildrenRenderer<VNode>>>
             <i16 as IntoPropValue<ChildrenRenderer<VNode>>>
             <i32 as IntoPropValue<ChildrenRenderer<VNode>>>
             <i64 as IntoPropValue<ChildrenRenderer<VNode>>>
             <i128 as IntoPropValue<ChildrenRenderer<VNode>>>
           and 47 others

For more information about this error, try `rustc --explain E0277`.
2

It's pretty clear from the IString part that the framework wants you to pass a string, or at least something that can be turned into a string. Which is unsurprising, to say the least, because HTML (XML) attribute values are strings.

If your callback function is accessible under that name from JS, try specifying its quoted name instead.

(I don't know yew, so this might not work, but maybe worth a shot.)

3

validate_function is not an attribute of the <input> element.

Also, not related but important, using String for props is an anti-pattern in yew, you should use AttrValue.

2 Likes
4

I haven't worked with Yew myself, but if you use #[function_component(SomeName)], aren't you expected to use SomeName and not the function name?

1 Like
5

This topic was automatically closed 90 days after the last reply. We invite you to open a new topic if you have further questions or comments.