diff --git a/src/tutorial/03-PowerOfJSX.md b/src/tutorial/03-PowerOfJSX.md index 16376ce..967d34a 100644 --- a/src/tutorial/03-PowerOfJSX.md +++ b/src/tutorial/03-PowerOfJSX.md @@ -9,7 +9,7 @@ For example lets imagine we want to display a company profile information and a ```jsx function CompanyProfile(props) { //ticker and companyProfileInfo stored in a variable - const ticker = 'APPL'; + const ticker = 'AAPL'; const companyProfileInfo = { 'Company Name': 'Apple Inc.', 'Exchange': 'Nasdaq', @@ -38,7 +38,7 @@ The HTML output of the above Component when it's rendered will be: ```html
-
Profile of: APPL
+
Profile of: AAPL
Company Name: Apple Inc.
Exchange: Nasdaq
@@ -49,7 +49,7 @@ The HTML output of the above Component when it's rendered will be:
``` -Well that's a handful, so let's review what's happening here. We have a `ticker` variable assigned to a value `APPL` and an object `companyProfileInfo` that has company profile. Inside the JSX (inside the `return` statement) we have a `div` enclosing everything. In JSX, **a component must return one and only one enclosing tag**. That tag can have as many children as it wants. +Well that's a handful, so let's review what's happening here. We have a `ticker` variable assigned to a value `AAPL` and an object `companyProfileInfo` that has company profile. Inside the JSX (inside the `return` statement) we have a `div` enclosing everything. In JSX, **a component must return one and only one enclosing tag**. That tag can have as many children as it wants. ```jsx // ❌ This is illegal in React since the return has more than one tag. return (