How to render optional props simply?

[duskmoon314]

Hi, I'm new to yew and trying to build a Tic-Tac-Toe example with functional components just like which in the tutorial of React.js. And I wonder what is a good and simple way to render optional props.

To be more specific, in React.js we can write code like this:

interface SquareProps {
  value: "X" | "O" | undefined;
  // some other props
}
const Square: React.FC<SquareProps> = (props) => {
  const { value } = props;
  return <button>{value}</button>
}

And it won't display anything if value is undefined.

I tried to translate these codes to yew:

#[derive(PartialEq)]
enum SquareValue {
    X,
    O,
}

impl Display for SquareValue {
    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        match self {
            Self::X => write!(f, "X"),
            Self::O => write!(f, "O"),
        }
    }
}

#[derive(Properties, PartialEq)]
struct SquareProps {
    value: Option<SquareValue>,
}

#[function_component(Square)]
fn square(props: &SquareProps) -> Html {
    match &props.value {
        Some(v) => html! {
            <button>{v}</button>
        },
        None => html! {
            <button></button>
        },
    }
}

This seems very annoying, and I need to write the same code for every optional value. Then I figure out another way by defining an Option wrapper:

#[derive(PartialEq)]
struct DisplayableOption<T: Display>(Option<T>);

impl<T: Display> Display for DisplayableOption<T> {
    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        match &self.0 {
            Some(t) => t.fmt(f),
            None => write!(f, ""),
        }
    }
}

#[derive(Properties, PartialEq)]
struct SquareProps {
    value: DisplayableOption<SquareValue>,
}

#[function_component(Square)]
fn square(props: &SquareProps) -> Html {
    html! {
        <button>{&props.value}</button>
    }
}

But this makes using Option's method cumbersome. So I come here to ask if a better practice existed. Please share your ideas with me. 😄

[ranile]

Take a look at Option::unwrap_or/Option::unwrap_or_else. That's likely what you're looking for

[duskmoon314]

I have tried but the return value of Option::unwrap_or / Option::unwrap_or_else is T, the generic of Option. In this way, I might need to add a None to SquareValue to display nothing. Then there is no need to use Option:

#[derive(PartialEq, Clone, Copy, Debug)]
enum SquareValue {
    X,
    O,
    None,
}

impl Display for SquareValue {
    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        match self {
            Self::X => write!(f, "X"),
            Self::O => write!(f, "O"),
            Self::None => write!(f, ""),
        }
    }
}

#[derive(Properties, PartialEq)]
struct SquareProps {
    value: SquareValue,
    on_click: Callback<()>,
}

#[function_component(Square)]
fn square(SquareProps { value, on_click }: &SquareProps) -> Html {
    let on_click = {
        let on_click = on_click.clone();
        Callback::from(move |_| on_click.emit(()))
    };
    html! {
        <button class="square" onclick={on_click}>{ value }</button>
    }
}

[voidpumpkin]

@duskmoon314 in your case i would just do

#[derive(PartialEq)]
enum SquareValue {
    X,
    O,
}

#[derive(Properties, PartialEq)]
struct SquareProps {
    value: Option<SquareValue>,
}

    html! {
        <button class="square" onclick={on_click}>{ value.unwrap_or("") }</button>
    }

[duskmoon314]

Just as I reply to hamza1311, this will cause the error "mismatched types expected enum SquareValue, found &str" since the return value of Option::unwrap_or / Option::unwrap_or_else is T. Maybe changing SquareValue into String is a solution. But I expect something like enum or union type of TypeScript to restrict value into several options.

[voidpumpkin]

Just as I reply to hamza1311, this will cause the error "mismatched types expected enum SquareValue, found &str" since the return value of Option::unwrap_or / Option::unwrap_or_else is T. Maybe changing SquareValue into String is a solution. But I expect something like enum or union type of TypeScript to restrict value into several options.

Oh yeah, then just

    let value = value.map(String::from).unwrap_or_else(String::Default);
    html! {
        <button class="square" onclick={on_click}>{ value }</button>
    }