yew/website/versioned_docs/version-0.20/concepts/function-components/generics.mdx

---
title: 'Generic Components'
description: 'The #[function_component] attribute'
---

import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'

The `#[function_component]` attribute also works with generic functions for creating generic components.

```rust
use std::fmt::Display;
use yew::{function_component, html, Properties, Html};

#[derive(Properties, PartialEq)]
pub struct Props<T>
where
    T: PartialEq,
{
    data: T,
}

#[function_component]
pub fn MyGenericComponent<T>(props: &Props<T>) -> Html
where
    T: PartialEq + Display,
{
    html! {
        <p>
            { &props.data }
        </p>
    }
}

// then can be used like this
html! {
    <MyGenericComponent<i32> data=123 />
};

// or
html! {
    <MyGenericComponent<String> data={"foo".to_string()} />
};
```