forwarding-refs: concrete example for function name

Author: eps1lon

content/docs/forwarding-refs.md

@@ -67,7 +67,7 @@ For example, the following component will appear as "*ForwardRef*" in the DevToo
 
 `embed:forwarding-refs/wrapped-component.js`
 
-If you name the render function, DevTools will also include its name (e.g. "*ForwardRef(myFunction)*"):
+If you name the render function, DevTools will also include its name (e.g. "*ForwardRef(Button)*"):
 
 `embed:forwarding-refs/wrapped-component-with-function-name.js`
 

examples/forwarding-refs/wrapped-component-with-function-name.js

@@ -1,5 +1,9 @@
-const WrappedComponent = React.forwardRef(
-  function myFunction(props, ref) {
-    return <LogProps {...props} forwardedRef={ref} />;
+const FancyButton = React.forwardRef(
+  function Button(props, ref) {
+    return (
+      <button ref={ref} className="FancyButton">
+        {props.children}
+      </button>
+    );
   }
 );

examples/forwarding-refs/wrapped-component.js

@@ -1,3 +1,7 @@
-const WrappedComponent = React.forwardRef((props, ref) => {
-  return <LogProps {...props} forwardedRef={ref} />;
+const FancyButton = React.forwardRef((props, ref) => {
+  return (
+    <button ref={ref} className="FancyButton">
+      {props.children}
+    </button>
+  );
 });