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

**laurentg2017** · 12/09/2020, 13h01

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

**laurentg2017** · 13/09/2020, 17h46

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')
);

**johanpetrikovsky** · 08/10/2020, 10h21

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.

**laurentg2017** · 08/10/2020, 11h45

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

**johanpetrikovsky** · 08/10/2020, 17h15

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.

**laurentg2017** · 08/10/2020, 21h02

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

**johanpetrikovsky** · 09/10/2020, 09h22

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/