Introduzione
In questa semplice quida vi guiderò passo dopo passo all' utilizzo di props
per il passaggio di valori da un componente all'altro. Nella guida vedremo come si passano i valori dal componente genitore al figlio.
Passiamo i props al Child
Il termine props
non significa altro che proprietà . Ipotizziamo che vogliamo passare dei valori dal componente parent Videoteca.js
al componente child Film.js
.
Scriveremo in da Videoteca.js
in <Film />
gli attributi che vogliamo passare:
- titolo
- genere
- data
Ed impostiamo ad ogniuno il corrispettivo valore:
import React from 'react';
import Film from './Film';
import './style.css';
export default function Videoteca() {
return (
<div>
<h1 class="text-center">Videoteca</h1>
<div classname="container-film">
<Film titolo="Godzilla" genere="Azione" data="2012" />
</div>
</div>
);
}
Prendiamo i props dal Parent
Ora andiamo nel nostro componente child Film.js
e impostiamo un argomento di nome props
(la scelto del nome è a vostro piacimento, ma consiglio di scrivere props
per una maggiore chiarezza).
Per accedere al titolo ci basterà scrivere props.title
e per visualizzarlo nel componente ci basterà inserirlo tra parentesi graffe:
import React from 'react';
import './style.css';
export default function Film(props) {
return (
<div class="film">
<h3>{props.titolo}</h3>
</div>
);
}
Semplice, no? Possiamo fare lo stesso con genere
e data
. Inoltre nulla ci vieta di farlo con altri componenti Film.js
:
Sommario
Se non vi è ancora chiaro immaginate props
come una scatola. Quando andiamo a inserire gli attributi HTML dal parent al nostro child immaginate che riempiamo la "scatola props" con quegli attributi e li passiamo al componente dove li abbiamo scritti. Fatto questo ci basterà scrivere props.nome-attributo
nel child per farli "uscire dalla scatola".
(Non prendere questa come definizione, è solo un esempio per farvi capire il concetto).
Spero questa mini guida vi sia piaciuta , considera di mettere ❤️ al post e seguirmi sui miei social:
Top comments (0)