Introduzione

In questa semplice quida vi guiderò passo dopo passo all' utilizzo diprops 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 termineprops non significa altro cheproprietà . Ipotizziamo che vogliamo passare dei valori dal componente parentVideoteca.js al componente childFilm.js.
Scriveremo in daVideoteca.js in<Film /> gli attributi che vogliamo passare:

• titolo
• genere
• data

Ed impostiamo ad ogniuno il corrispettivo valore:

importReactfrom'react';importFilmfrom'./Film';import'./style.css';exportdefaultfunctionVideoteca(){return(<div><h1class="text-center">Videoteca</h1><divclassname="container-film"><Filmtitolo="Godzilla"genere="Azione"data="2012"/></div></div>);}

Prendiamo i props dal Parent

Ora andiamo nel nostro componente childFilm.js e impostiamo un argomento di nomeprops(la scelto del nome è a vostro piacimento, ma consiglio di scrivereprops per una maggiore chiarezza).
Per accedere al titolo ci basterà scrivereprops.title e per visualizzarlo nel componente ci basterà inserirlo tra parentesi graffe:

importReactfrom'react';import'./style.css';exportdefaultfunctionFilm(props){return(<divclass="film"><h3>{props.titolo}</h3></div>);}

Semplice, no? Possiamo fare lo stesso congenere edata. Inoltre nulla ci vieta di farlo con altri componentiFilm.js:

Sommario

Se non vi è ancora chiaro immaginateprops 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à scrivereprops.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:

Linkedin
GitHub