2/8 add internal state page

src/SUMMARY.md

@@ -21,6 +21,7 @@
   * [Literals & Expressions](concepts/html/literals-and-expressions.md)
   * [Components](concepts/html/components.md)
 * [Components](concepts/components/README.md)
+  * [Internal state](concepts/components/internalstate.md)
   * [Properties](concepts/components/properties.md)
   * [Callbacks](concepts/components/callbacks.md)
   * [Refs](concepts/components/refs.md)

src/concepts/components/internalstate.md

@@ -0,0 +1,169 @@
+---
+description: Component can maintain it's own state and render information depending on it
+---
+
+# Internal State
+
+The component can manage it's own state using the Rust struct that implement the trait `Component`. The HTML rendering is based on this state.
+When state change there is possibility to re-render the component.
+
+> TODO documentation on state mutation
+
+```rust
+use yew::prelude::*;
+
+pub struct InternalStateComponent {
+    name:String,
+}
+
+impl Component for InternalStateComponent {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+        Self {
+            name: "Clark".into(),
+        }
+    }
+
+    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+        true
+    }
+
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        true
+    }
+
+    fn view(&self) -> Html {
+        html! {
+            <>
+                <h1>{format!("Hello {}",self.name)}</h1>
+            </>
+        }
+    }
+}
+```
+
+## State definition
+
+Here we add the `name` field in the struct
+
+```rust
+# use yew::prelude::*;
+#
+// ...
+pub struct InternalStateComponent {
+    name:String,
+}
+// ...
+#
+# impl Component for InternalStateComponent {
+#     type Message = ();
+#     type Properties = ();
+#
+#     fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+#         Self {
+#             name: "Clark".into(),
+#         }
+#     }
+#
+#     fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+#         true
+#     }
+#
+#     fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+#         true
+#     }
+#
+#     fn view(&self) -> Html {
+#         html! {
+#             <>
+#                 <h1>{format!("Hello {}",self.name)}</h1>
+#             </>
+#         }
+#     }
+# }
+
+```
+
+## State initialization
+
+The component lifecycle will initialize the state in the `create` method.
+
+```rust
+# use yew::prelude::*;
+#
+# pub struct InternalStateComponent {
+#     name:String,
+# }
+#
+# impl Component for InternalStateComponent {
+#     type Message = ();
+#     type Properties = ();
+// ...
+    fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+        Self {
+            name: "Clark".into(),
+        }
+    }
+// ...
+#     fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+#         true
+#     }
+#
+#     fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+#         true
+#     }
+#
+#     fn view(&self) -> Html {
+#         html! {
+#             <>
+#                 <h1>{format!("Hello {}",self.name)}</h1>
+#             </>
+#         }
+#     }
+# }
+```
+
+## Rendering based on the state value
+
+Using the `html!` macro we can render html based on the component state in the `view` method
+
+> please refer to the `html!` macro documentation page for more detail on the HTML rendering
+
+```rust
+# use yew::prelude::*;
+#
+# pub struct InternalStateComponent {
+#     name:String,
+# }
+#
+# impl Component for InternalStateComponent {
+#     type Message = ();
+#     type Properties = ();
+#
+#     fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+#         Self {
+#             name: "Clark".into(),
+#         }
+#     }
+#
+#     fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+#         true
+#     }
+#
+#     fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+#         true
+#     }
+#
+// ...
+    fn view(&self) -> Html {
+        html! {
+            <>
+                <h1>{format!("Hello {}",self.name)}</h1>
+            </>
+        }
+    }
+// ...
+# }
+```