From 3608a0db726af7338fa460ea2f850c1736338a28 Mon Sep 17 00:00:00 2001 From: Jean-Christophe <> Date: Wed, 10 Jan 2024 14:51:07 +0100 Subject: [PATCH] props et pattern matching --- README.md | 3 ++- src/components/person.jsx | 6 +++--- src/components/personListing.jsx | 6 +++--- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 3e9890d..798a158 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,7 @@ où `tag` peut prendre comme valeur : voir `/src/components/first.jsx`, `/src/components/second.jsx` et son utilisation dans `/src/mains.js` * `v3` : utilisation des propriétés voir `/src/components/person.jsx`, `/src/components/personListing.jsx` et son utilisation dans `/src/mains.js` - +* `v3.1` : utilisation de la syntaxe de pattern matching sur les objets pour destructurer l'objet `props` dans le paramètre du constructeur du composant. + Faire ```git checkout main``` pour revenir à la version finale. diff --git a/src/components/person.jsx b/src/components/person.jsx index fe29ea4..f15bfc7 100644 --- a/src/components/person.jsx +++ b/src/components/person.jsx @@ -8,9 +8,9 @@ import '../style/person.css'; * reminder : in jsx, code inside {} is javascript interpreted code */ const Person = - props => <div className="person">Here is : - <div>name : <span>{ props.name }</span> </div> - <div>age : <span>{ props.age }</span> </div> + ( { name, age } ) => <div className="person">Here is : + <div>name : <span>{ name }</span> </div> + <div>age : <span>{ age }</span> </div> </div> export default Person; diff --git a/src/components/personListing.jsx b/src/components/personListing.jsx index 4730fde..97dc8df 100644 --- a/src/components/personListing.jsx +++ b/src/components/personListing.jsx @@ -7,10 +7,10 @@ import Person from './person.jsx'; * 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 = - props => <div> + ({ persons }) => <div> Listing : - <Person name={props.persons[0].name} age={props.persons[0].age} /> - <Person {...props.persons[1]} /> + <Person name={persons[0].name} age={persons[0].age} /> + <Person { ...persons[1]} /> </div> export default PersonListing; -- GitLab