Forwarding Refs

In this section, we are going to discuss the methodologies used in order to implement Forwarding Refs. These are as follows:

Composition

One of the key concepts of React is the composition of components. That means we want to be able to encapsulate logic without creating dependencies between components.

Let's look at the following code snippet, in which the SayHello component adds a button that says hello to literally any child component that you pass to it. This way, the child component only needs to know about what it is supposed to know, in the same way the SayHello component only cares about the logic and the UI responsible for saying hello:

import React from "react";
const SayHello = props => {
  return (
  <div>
    { props.children }
    <button onClick={() => console.log("Hello!")}>
      Say Hello!
  ...