Guida React Props da Parent a Child

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:

Linkedin
GitHub