définitions locales et valeurs par défaut

README.md

@@ -36,6 +36,8 @@ où `tag` peut prendre comme valeur :
 * `v3.2` : la propriété `children`  
 * `v4` : définition des composants à l'aide de classes   
   voir `/src/components/person_class.jsx`, `/src/components/personListing_class.jsx` et son utilisation dans `/src/mains.js`
+* `v4.5` : définitions locales et valeurs par défaut  
+   voir `/src/components/person.jsx` et son utilisation dans `/src/mains.js`
 
 Faire ```git checkout main``` pour revenir à la version finale.
 

src/components/person.jsx

@@ -7,10 +7,17 @@ import '../style/person.css';
 * define a component that uses props, props is a javascript object
 * reminder : in jsx, code inside {} is javascript interpreted code
 */
-const Person =
-        ( { name, age } ) => <div className="person">Here is :
-                   <div>name : <span>{ name }</span> </div>
-                   <div>age  : <span>{ age }</span> </div>
-                 </div>
+const Person = ( { name = 'Anonymous' , age } ) => {
 
+   const year_or_years = age > 1 ? 'years' : 'year';
+   const ADULT_AGE = 18;
+   const childOrNot =  age => age < ADULT_AGE ? 'young' : 'adult' ;
+
+   return (
+      <div className="person">Here is the <span>{childOrNot(age)}</span>:
+         <div>name : <span>{ name }</span> </div>
+         <div>age  : <span>{age} {year_or_years} </span>  </div>
+      </div>
+   );
+}
 export default Person;

src/components/personListing.jsx

@@ -6,12 +6,12 @@ import Person from './person.jsx';
 * props.persons is an Array, here we assume with at least two elements
 * note, in second use of Person, the use of spread operator "..." on object to alleviate the syntax, possible when object field names correspond to props name
 */
-const PersonListing =
-         ({ persons , children }) => <div>
-                     Listing :
-                     <Person { ...persons[0] } />
-                     <Person { ...persons[1] } />
-                     { children }
-                  </div>
+const PersonListing = ({ persons , children }) => 
+            (<div>
+               Person listing :
+               <Person { ...persons[0] } />
+               <Person { ...persons[1] } />
+               { children }
+             </div>);
 
 export default PersonListing;

src/scripts/main.js

@@ -4,16 +4,17 @@ import { createRoot } from 'react-dom/client';
 import personsData from '../data/personsData.js';
 
 // import React component
-import Person from '../components/person_class.jsx'
-import PersonListing from '../components/personListing_class.jsx';
+import Person from '../components/person.jsx'
+import PersonListing from '../components/personListing.jsx';
 
 const bootstrapReact = () => {
    const root = createRoot(document.getElementById('insertReactHere'));  // parent for created element = "insertion point"
 
    const component = <PersonListing persons={personsData}>
-                        <h3>This node and followings are children and then correspond to <code>props.children</code></h3>
-                        <Person name="Someone Else" age={42} />
+                        <h3>This node and followings are children and then correspond to prop <code>children</code></h3>
+                        <Person   age={42} />
                         <Person name="New One" age={1} />
+                        <Person name="Mysterious"   />
                      </PersonListing>;
 
    root.render(component);