From d0ff912ab830ae90fe4d45f2733788efc4383111 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri, 15 Mar 2019 17:54:54 +0100
Subject: [PATCH 1/2] forwarding-refs: concrete example for function name

---
 content/docs/forwarding-refs.md                        |  2 +-
 .../wrapped-component-with-function-name.js            | 10 +++++++---
 examples/forwarding-refs/wrapped-component.js          |  8 ++++++--
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md
index 3318d8499ce..afeec4f17a8 100644
--- a/content/docs/forwarding-refs.md
+++ b/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`
 
diff --git a/examples/forwarding-refs/wrapped-component-with-function-name.js b/examples/forwarding-refs/wrapped-component-with-function-name.js
index f68b5c5d990..de18fa8510d 100644
--- a/examples/forwarding-refs/wrapped-component-with-function-name.js
+++ b/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>
+    );
   }
 );
diff --git a/examples/forwarding-refs/wrapped-component.js b/examples/forwarding-refs/wrapped-component.js
index f20e7f5918d..7f8041cdae8 100644
--- a/examples/forwarding-refs/wrapped-component.js
+++ b/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>
+  );
 });

From e47d3a6bdfc81ba8546b53693f7f31a5aefa3a8f Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri, 15 Mar 2019 18:10:47 +0100
Subject: [PATCH 2/2] format code

---
 .../wrapped-component-with-function-name.js   | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/examples/forwarding-refs/wrapped-component-with-function-name.js b/examples/forwarding-refs/wrapped-component-with-function-name.js
index de18fa8510d..8bcfe74a933 100644
--- a/examples/forwarding-refs/wrapped-component-with-function-name.js
+++ b/examples/forwarding-refs/wrapped-component-with-function-name.js
@@ -1,9 +1,10 @@
-const FancyButton = React.forwardRef(
-  function Button(props, ref) {
-    return (
-      <button ref={ref} className="FancyButton">
-        {props.children}
-      </button>
-    );
-  }
-);
+const FancyButton = React.forwardRef(function Button(
+  props,
+  ref
+) {
+  return (
+    <button ref={ref} className="FancyButton">
+      {props.children}
+    </button>
+  );
+});