Use concise arrow function syntax in button component

Author: vejol

src/content/1/en/part1c.md

@@ -729,16 +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:
 
-```js
-const Button = ({ onClick, text }) => (
-  <button onClick={onClick}>
-    {text}
-  </button>
-)
-```
-
-Or, similar to the Display example, you can further optimize the Button component to a single line by removing the parentheses and formatting it as follows:
-
 ```js
 const Button = ({ onClick, text }) => <button onClick={onClick}>{text}</button>
 ```

src/content/1/en/part1d.md

@@ -427,13 +427,7 @@ const History = (props) => {
   )
 }
 
-// highlight-start
-const Button = ({ onClick, text }) => (
-  <button onClick={onClick}>
-    {text}
-  </button>
-)
-// highlight-end
+const Button = ({ onClick, text }) => <button onClick={onClick}>{text}</button> // highlight-line
 
 const App = () => {
   const [left, setLeft] = useState(0)
@@ -497,11 +491,7 @@ don't write more code but rather find and fix the problem **immediately**. There
 Old-school, print-based debugging is always a good idea. If the component
 
 ```js
-const Button = ({ onClick, text }) => (
-  <button onClick={onClick}>
-    {text}
-  </button>
-)
+const Button = ({ onClick, text }) => <button onClick={onClick}>{text}</button>
 ```
 
 is not working as intended, it's useful to start printing its variables out to the console. In order to do this effectively, we must transform our function into the less compact form and receive the entire props object without destructuring it immediately:

src/content/1/fi/osa1c.md

@@ -715,11 +715,9 @@ const Button = (props) => {
 Destrukturoidaan <i>props</i>:ista tarpeelliset kentät ja käytetään nuolifunktioiden tiiviimpää muotoa:
 
 ```js
-const Button = ({ onClick, text }) => (
-  <button onClick={onClick}>
-    {text}
-  </button>
-)
+const Button = ({ onClick, text }) => <button onClick={onClick}>{text}</button>
 ```
 
+Koska komponentti sisältää vain _return_-lauseen, on tiiviin nuolifunktiosyntaksin käyttö mahdollista.
+
 </div>

src/content/1/fi/osa1d.md

@@ -421,13 +421,7 @@ const History = (props) => {
   )
 }
 
-// highlight-start
-const Button = ({ onClick, text }) => (
-  <button onClick={onClick}>
-    {text}
-  </button>
-)
-// highlight-end
+const Button = ({ onClick, text }) => <button onClick={onClick}>{text}</button> // highlight-line
 
 const App = () => {
   const [left, setLeft] = useState(0)
@@ -491,11 +485,7 @@ Jos ja kun koodi ei käänny eli selaimessa alkaa näkyä punaista
 Vanha kunnon printtaukseen perustuva debuggaus on monesti toimiva tapa. Eli jos esim. komponentissa
 
 ```js
-const Button = ({ onClick, text }) => (
-  <button onClick={onClick}>
-    {text}
-  </button>
-)
+const Button = ({ onClick, text }) => <button onClick={onClick}>{text}</button>
 ```
 
 olisi ongelma, kannattaa komponentista alkaa printtailla konsoliin. Pystyäksemme printtaamaan tulee funktio muuttaa pitempään muotoon ja propsit kannattaa kenties vastaanottaa ilman destrukturointia: