IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

Passage d'un objet ou tableau par props d'un composant à un autre


Sujet :

React

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    avril 2017
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : avril 2017
    Messages : 55
    Points : 34
    Points
    34
    Par défaut Passage d'un objet ou tableau par props d'un composant à un autre
    Bonjour,
    Je suis un grand débutant en react j'ai fais les tutos de react.org
    je sais passer une chaine de caractere d'un composant a un autre mais pas un objet ou un tableau d'un composant à un autre
    J'ai cherché des exemples sur le web mais rien de convaincant
    je sais que ça doit être tout simple
    j'aimerai donc passer un objet ou un tableau d'un composant à un autre

    Voici mon code
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    class  Parent extends React.Component {
        render() {
    	const data =[{"name":"test1"},{"name":"test2"}];
        const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);	
       // return <Test value="sara" />; 
       return     (
     
          <div>
    	  <Test value={data} />// ça doit coincer ici
          {listItems }
          </div>
        );
     
       }
    }
    class Test extends React.Component {
    	constructor(props) {
        super(props);
     
    	alert(this.props.value);
        this.state = {
        evt: null
        }
     
        // Cette liaison est nécéssaire afin de permettre    // l'utilisation de `this` dans la fonction de rappel.  
    	this.handleClick = this.handleClick.bind(this);  
    	}
     
    	handleClick(e) {  /*  this.setState({
        evt: e.target */
    	e.preventDefault();
    	alert(e.type);
       // })  
       }
     
      render() {
        return (
          <div>
            <h1>Bonjour tout le monde !</h1>
    		<h1>{this.props.value}</h1>
     
            <a href="" onClick={this.handleClick}>Un lien </a>
          </div>
        );
      }
    }
    // ========================================
     
    ReactDOM.render(
      <Parent />,
      document.getElementById('root')
    );
    Merci pour votre aide

  2. #2
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    avril 2017
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : avril 2017
    Messages : 55
    Points : 34
    Points
    34
    Par défaut
    Pour ceux que ça interesse voici une solution
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
     
    class ListItem extends React.Component {
      render() {
        return <li>{this.props.value}</li>;
      }
    }
    class NumberList extends React.Component {
      render() {
        const numbers = this.props.numbers;
        const listItems = numbers.map((number) => (
          <ListItem key={number.toString()} value={number} />
        ));
        return <ul>{listItems}</ul>;
      }
    }
    // ========================================
    const numbers = [1, 2, 3, 4, 5];
    ReactDOM.render(
      <NumberList numbers={numbers} />,
      document.getElementById('root')
    );

  3. #3
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2020
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : octobre 2020
    Messages : 35
    Points : 68
    Points
    68
    Par défaut
    Merci d'avoir posté ta réponse. Je suis quand même surpris de voir des débutants démarrer avec des composants sur l'ancienne version de React celle avec les classe, les nouvelles versions de React favorisent les composants fonctionnels et les code base sont amenés à évoluer dans un sens. Si il est très bien de savoir comment l'ancienne manière fonctionne, je te recommande vivement de te concentrer sur cette nouvelle manière de faire.
    Pour faire une comparaison un peu douteuse, ce serait comme apprendre à faire des layout en CSS avec des float:left; alors qu'on peut le faire maintenant avec du Flex ou Grid qui est plus adapté maintenant et où vers l'industrie tend.

    Développeur freelance à Toulouse - site en construction

  4. #4
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    avril 2017
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : avril 2017
    Messages : 55
    Points : 34
    Points
    34
    Par défaut
    Merci pour cette réflexion
    J'ai appris avec Modern Full-stack Development en anglais de Mars 2020
    Si tu as des liens ou des livres sur la nouvelle approche fonctionnelle merci

  5. #5
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2020
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : octobre 2020
    Messages : 35
    Points : 68
    Points
    68
    Par défaut
    Wesbos vient de sortir un gros tuto, Gatsby + headless CMS, c'est vraiment super qualitatif en terme de tuto, mais peut être un peu avancé pour toi en ce moment.
    Kent C. Dodds, un garçon aussi réputé dans le milieu qui a travaillé pour des grands comptes vient de sortir un tutoriel. J'ai vu sur reddit que le dépot github de sa formation était en public, donc tu dois peut etre pouvoir acces au slide et au contenu, à creuser si ça t'intéresse.
    https://epicreact.dev/ par contre niveau tarif c'est pas donné, mais les retours sont très bon, je ne sais pas si tu peux te faire financer cette formation.
    https://frontendmasters.com/ propose également d'excellents tutos, ceux de React ne doivent pas faire défaut, par contre c'est 30$ par mois.
    En gratuit j'ai rien qui me vient, le dernier que j'avais fais était sur les classe aussi.
    Je m'écarte un peu du sujet, mais si le Javascript c'est pas quelque chose avec tu es forcément super à l'aise manipuler des tableaux avec includes, reduce etc...
    je te recommande vivement cette serie, qui elle est gratuite, de WesBos que j'ai cité plus haut.
    https://javascript30.com/

    Au risque de me répéter ça change pas mal de chose dans les methodes pour la gestion des cycles des composants, adieu composantDidMount, componentDidUpdate.... les states ne sont plus gérés de la mêem manière, apparition du context pour gérer des states globaux à l'application.
    Bon courage dans ton apprentissage et si tu as d'autres questions hésites pas.

    Développeur freelance à Toulouse - site en construction

  6. #6
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    avril 2017
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : avril 2017
    Messages : 55
    Points : 34
    Points
    34
    Par défaut
    Merci beaucoup à toi c'est très sympa et merci pour tes précisions concernant l'approche fonctionelle
    Du coup je vais pas plus loin concernant react et les classes
    Je vais me replonger dans javascript avec ton tuto
    Merci

  7. #7
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2020
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : octobre 2020
    Messages : 35
    Points : 68
    Points
    68
    Par défaut
    Top profite bien
    Dernière ressource que j'ai oublié de préciser pour apprendre react qui est peut-être un peu plus abordable quand tu vas t'y remettre
    https://www.leveluptutorials.com/tutorials

    ils font un podcast aussi Wesbos & Scott Tolinski très agréable à écouter je trouve même pour des débutants.
    https://syntax.fm/

    Développeur freelance à Toulouse - site en construction

  8. #8
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    avril 2017
    Messages
    55
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : avril 2017
    Messages : 55
    Points : 34
    Points
    34
    Par défaut
    Ah super Merci beaucoup Tu es un chef
    Je m'y plonge des demain de belles heures en perspective
    Encore merci

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 3
    Dernier message: 06/03/2019, 09h35
  2. [Tableaux] Passage d'un tableau par URL
    Par JmL40 dans le forum Langage
    Réponses: 5
    Dernier message: 04/03/2008, 08h52
  3. [Tableaux] Passage d'un tableau par formulaire
    Par JmL40 dans le forum Langage
    Réponses: 2
    Dernier message: 08/10/2007, 13h50
  4. Réponses: 3
    Dernier message: 19/05/2005, 10h46
  5. Passage d'un tableau par référence?
    Par sebduth dans le forum C
    Réponses: 9
    Dernier message: 16/07/2003, 18h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo