In ReactJS ogni component può ricevere valori in input passati dal component padre. Se usiamo un component creato tramite function, questi valori sono raggruppati in un oggetto che viene passato in input alla funzione, mentre se creiamo il component tramite classe, questi vengono passati in input al costruttore e disponibili nel component attraverso la proprietà props.

function Child(props) {
  return <div>props.fullName</div>;
}

class Child extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>{this.props.fullName}</div>;
  }
}

Nel component padre quello che dobbiamo fare è passare al component figlio la proprietà fullName semplicemente impostandola come attributo del tag del component figlio.

function Parent() {
  ...
  return <Child fullName="Stefano Mostarda" />
}

Se usiamo TypeScript, possiamo ulteriormente migliorare il codice specificando il tipo dell'oggetto che contiene le props.

interface Props {
  fullName: string;
}

function Child(props: Props) {
  return <div>props.fullName</div>;
}

class Child extends React.Component {
  constructor(props: Readonly<Props>) {
    super(props);
  }

  render() {
    return <div>this.props.fullName</div>;
  }
}

In questo modo all'interno del component Child avremo l'intellisense su props, e nel component Parent avremo l'intellisense sul tag Child.