From 4a4c61b6d2e35043623e99f24959f18ed7f8ab84 Mon Sep 17 00:00:00 2001
From: Vesa Jolkkonen <vesa.jolkkonen@hotmail.com>
Date: Sun, 12 Jan 2025 19:36:46 +0200
Subject: [PATCH] Clarify naming of the event handler props

---
 src/content/1/en/part1c.md | 27 ++-------------------------
 src/content/1/fi/osa1c.md  | 22 +++++++++++-----------
 2 files changed, 13 insertions(+), 36 deletions(-)

diff --git a/src/content/1/en/part1c.md b/src/content/1/en/part1c.md
index cd09f9d782..dc0fa5a226 100644
--- a/src/content/1/en/part1c.md
+++ b/src/content/1/en/part1c.md
@@ -628,10 +628,10 @@ const App = () => {
 
 Since we now have an easily reusable <i>Button</i> component, we've also implemented new functionality into our application by adding a button that can be used to decrement the counter.
 
-The event handler is passed to the <i>Button</i> component through the _onClick_ prop. The name of the prop itself is not that significant, but our naming choice wasn't completely random. 
+The event handler is passed to the <i>Button</i> component through the _onClick_ prop. When creating your own components, you can theoretically choose the prop name freely. However, our naming choice for the event handler was not entirely arbitrary.
 
 React's own official [tutorial](https://react.dev/learn/tutorial-tic-tac-toe) suggests:
-"In React, it’s conventional to use onSomething names for props which take functions which handle events and handleSomething for the actual function definitions which handle those events."
+"In React, it’s conventional to use _onSomething_ names for props which take functions which handle events and handleSomething for the actual function definitions which handle those events."
 
 ### Changes in state cause re-rendering
 
@@ -729,11 +729,6 @@ const Button = (props) => {
 
 We can use destructuring to get only the required fields from <i>props</i>, and use the more compact form of arrow functions:
 
-**NB**: While building your own components, you can name their event handler props anyway you like, for this you can refer to the react's documentation on [Naming event handler props](https://react.dev/learn/responding-to-events#naming-event-handler-props). It goes as following:
-
-> By convention, event handler props should start with `on`, followed by a capital letter.
-For example, the Button component’s `onClick` prop could have been called `onSmash`:
-
 ```js
 const Button = ({ onClick, text }) => (
   <button onClick={onClick}>
@@ -742,22 +737,4 @@ const Button = ({ onClick, text }) => (
 )
 ```
 
-could also be called as following:
-
-```js
-const Button = ({ onSmash, text }) => (
-  <button onClick={onSmash}>
-    {text}
-  </button>
-)
-```
-
-We can simplify the Button component once more by declaring the return statement in just one line:
-
-```js
-const Button = ({ onSmash, text }) => <button onClick={onSmash}>{text}</button>
-```
-
-**NB**: However, be careful to not oversimplify your components, as this makes adding complexity a more tedious task down the road.
-
 </div>
diff --git a/src/content/1/fi/osa1c.md b/src/content/1/fi/osa1c.md
index fbbddd74ed..8d81dd5440 100644
--- a/src/content/1/fi/osa1c.md
+++ b/src/content/1/fi/osa1c.md
@@ -580,7 +580,7 @@ Tehdään seuraavaksi napeille tarkoitettu komponentti <i>Button</i>. Napille on
 ```js
 const Button = (props) => {
   return (
-    <button onClick={props.handleClick}>
+    <button onClick={props.onClick}>
       {props.text}
     </button>
   )
@@ -602,15 +602,15 @@ const App = () => {
       <Display counter={counter}/>
       // highlight-start
       <Button
-        handleClick={increaseByOne}
+        onClick={increaseByOne}
         text='plus'
       />
       <Button
-        handleClick={setToZero}
+        onClick={setToZero}
         text='zero'
       />     
       <Button
-        handleClick={decreaseByOne}
+        onClick={decreaseByOne}
         text='minus'
       />           
       // highlight-end
@@ -621,7 +621,7 @@ const App = () => {
 
 Koska meillä on nyt uudelleenkäytettävä komponentti <i>Button</i>, sovellukselle on lisätty uutena toiminnallisuutena nappi, jolla laskurin arvoa voi vähentää.
 
-Tapahtumankäsittelijä välitetään napeille propsin _handleClick_ välityksellä. Propsin nimellä ei ole sinänsä merkitystä, mutta valinta ei ollut sattumanvarainen, sillä esim. Reactin [tutoriaali](https://react.dev/learn/tutorial-tic-tac-toe) suosittelee tätä konventiota.
+Tapahtumankäsittelijä välitetään napeille propsin _onClick_ välityksellä. Omia komponentteja luotaessa propsin nimen voi periaatteessa valita täysin vapaasti, mutta esim. Reactin [tutoriaali](https://react.dev/learn/responding-to-events#naming-event-handler-props) suosittelee, että tapahtumankäsittelijän sisältävän propsin nimi alkaa etuliitteellä _on_ ja jatkuu isolla kirjaimella.
 
 ### Tilan muutos aiheuttaa uudelleenrenderöitymisen
 
@@ -658,9 +658,9 @@ const App = () => {
   return (
     <div>
       <Display counter={counter} />
-      <Button handleClick={increaseByOne} text="plus" />
-      <Button handleClick={setToZero} text="zero" />
-      <Button handleClick={decreaseByOne} text="minus" />
+      <Button onClick={increaseByOne} text="plus" />
+      <Button onClick={setToZero} text="zero" />
+      <Button onClick={decreaseByOne} text="minus" />
     </div>
   )
 } 
@@ -705,7 +705,7 @@ Vastaava suoraviivaistus voidaan tehdä myös nappikomponentille:
 ```js
 const Button = (props) => {
   return (
-    <button onClick={props.handleClick}>
+    <button onClick={props.onClick}>
       {props.text}
     </button>
   )
@@ -715,8 +715,8 @@ const Button = (props) => {
 Destrukturoidaan <i>props</i>:ista tarpeelliset kentät ja käytetään nuolifunktioiden tiiviimpää muotoa:
 
 ```js
-const Button = ({ handleClick, text }) => (
-  <button onClick={handleClick}>
+const Button = ({ onClick, text }) => (
+  <button onClick={onClick}>
     {text}
   </button>
 )