diff --git a/README.md b/README.md index 119f34d2..d9e3aa76 100644 --- a/README.md +++ b/README.md @@ -102,7 +102,10 @@ Running a web-compatible recipe: | | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ClockReactHooks/src/Main.purs)) | [ClockReactHooks](recipes/ClockReactHooks) | A React port of the ["User Interface - Clock" Elm Example](https://elm-lang.org/examples/clock). | | | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ComponentsHalogenHooks/src/Main.purs)) | [ComponentsHalogenHooks](recipes/ComponentsHalogenHooks) | Demonstrates how to nest one Halogen-Hooks-based component inside another and send/receive queries between the two. | | | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ComponentsInputHalogenHooks/src/Main.purs)) | [ComponentsInputHalogenHooks](recipes/ComponentsInputHalogenHooks) | Each time a parent re-renders, it will pass a new input value into the child, and the child will update accordingly. | +| | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ComponentsInputReactHooks/src/Main.purs)) | [ComponentsInputReactHooks](recipes/ComponentsInputReactHooks) | Each time the parent's state updates, it will pass a new prop value into the child, and the child will update accordingly. | | | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ComponentsMultiTypeHalogenHooks/src/Main.purs)) | [ComponentsMultiTypeHalogenHooks](recipes/ComponentsMultiTypeHalogenHooks) | Demonstrates a component that can communicate with its children that have differing types. | +| | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ComponentsMultiTypeReactHooks/src/Main.purs)) | [ComponentsMultiTypeReactHooks](recipes/ComponentsMultiTypeReactHooks) | Demonstrates a parent component with several children components, each with different prop types. | +| | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ComponentsReactHooks/src/Main.purs)) | [ComponentsReactHooks](recipes/ComponentsReactHooks) | Demonstrates how to nest one React Hooks-based component inside another and send props from the parent to the child component. | | :heavy_check_mark: | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/DateTimeBasicsLog/src/Main.purs)) | [DateTimeBasicsLog](recipes/DateTimeBasicsLog) | This recipe shows how to use `purescript-datetime` library to create `Time`, `Date`, and `DateTime` values and adjust/diff them. | | :heavy_check_mark: | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/DebuggingLog/src/Main.purs)) | [DebuggingLog](recipes/DebuggingLog) | This recipe shows how to do print-debugging using the `Debug` module's `spy` and `traceM` functions. The compiler will emit warnings to remind you to remove these debug functions before you ship production code. | | :heavy_check_mark: | | [DiceCLI](recipes/DiceCLI) | This recipe shows how to create an interactive command line prompt that repeatedly generates a random number between 1 and 6. | diff --git a/recipes/ComponentsMultiTypeReactHooks/src/Main.purs b/recipes/ComponentsMultiTypeReactHooks/src/Main.purs index 2c119075..f623446c 100644 --- a/recipes/ComponentsMultiTypeReactHooks/src/Main.purs +++ b/recipes/ComponentsMultiTypeReactHooks/src/Main.purs @@ -92,7 +92,7 @@ type SetState state mkComponentA :: Component (Boolean /\ SetState Boolean) mkComponentA = - component "Component A" \(enabled /\ setEnabled) -> + component "ComponentA" \(enabled /\ setEnabled) -> pure $ R.div_ [ R.p_ [ R.text "Toggle me!" ] @@ -104,7 +104,7 @@ mkComponentA = mkComponentB :: Component (Int /\ SetState Int) mkComponentB = - component "Component B" \(count /\ setCount) -> + component "ComponentB" \(count /\ setCount) -> pure $ R.div_ [ R.p_ @@ -119,7 +119,7 @@ mkComponentB = mkComponentC :: Component (String /\ EventHandler) mkComponentC = - component "Component C" \(value /\ onChange) -> + component "ComponentC" \(value /\ onChange) -> pure $ R.label_ [ R.p_ [ R.text "What do you have to say?" ]