Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Use forwardRef

See original GitHub issue

Hi,

It seems that all component functions are “hidden” when exported through the withStyles method.

[ x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Given a component App, using component MainDrawer that have a function toggleDrawer. When setting ref attribute on the use of MainDrawer (<MainDrawer ref={(drw) => { this.mainDrawer = drw; }} />) inside the render method in App, I should be able to call this.mainDrawer.toggleDrawer() inside component App.

Current Behavior

When dumping this in component App I see the mainDrawer component that was added. But it doesn’t contain the toggleDrawer function for some reason. If i remove the withStyles wrapper from component MainDrawer, then the toggleDrawer function appears in this.mainDrawer and can be executed.

The error I get in console is:

Uncaught TypeError: this.mainDrawer.toggleDrawer is not a function
    at App.doToggle (App.js:27)
    at Object.toggle (App.js:35)
    at onClick (AppBarHeader.js:31)
    at HTMLUnknownElement.callCallback (react-dom.development.js:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
    at Object.invokeGuardedCallback (react-dom.development.js:438)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:452)
    at executeDispatch (react-dom.development.js:836)
    at executeDispatchesInOrder (react-dom.development.js:858)
    at executeDispatchesAndRelease (react-dom.development.js:956)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:967)
    at Array.forEach (<anonymous>)
    at forEachAccumulated (react-dom.development.js:935)
    at processEventQueue (react-dom.development.js:1112)
    at runEventQueueInBatch (react-dom.development.js:3607)
    at handleTopLevel (react-dom.development.js:3616)
    at handleTopLevelImpl (react-dom.development.js:3347)
    at batchedUpdates (react-dom.development.js:11082)
    at batchedUpdates (react-dom.development.js:2330)
    at dispatchEvent (react-dom.development.js:3421)

This leads me to expect that something is going on in withStyles, that leads this function to be hidden? Or maybe I have misunderstood it all.

Steps to Reproduce (for bugs)

https://github.com/lazee/material-ui-issue-withstyles

Clone
yarn install
yarn dev
Click on the menu icon in the page that appears and look in console.

Your Environment

Tech	Version
Material-UI	latest next
React	16.2.0
browser	Chrome 65
Node	9.9.0

Issue Analytics

State:
Created 5 years ago
Reactions:7
Comments:6 (4 by maintainers)

Top GitHub Comments

3reactions

oliviertassinaricommented, Apr 21, 2018

Let’s wait and see how these libraries solve the problem:

2reactions

oliviertassinaricommented, Mar 28, 2018

this.mainDrawer.toggleDrawer()

@lazee Calling imperative methods for controlling elements is a discouraged pattern in React. I would encourage you to use an open like property.

It doesn’t contain the toggleDrawer function for some reason.

It’s because the withStyles() higher order component is exposing a different component. You have to use the documented innerRef property.

Let’s see if we can use forwardRef in the future to improve the story.

Top Results From Across the Web

Forwarding Refs - React

Ref forwarding is an opt-in feature that lets some components take a ref they receive, and pass it further down (in other words,...

How to use React's forwardRef function | Felix Gerschau

forwardRef is a helper function from React that allows us to forward a component's ref to another one. This tutorial will teach what...

How can I use forwardRef() in React? - Stack Overflow

The only way to pass a ref to a function component is using forwardRef. When using forwardRef, you can simply pass the ref...

Using forwardRef in React to clean up the DOM

React forwardRef is a method that allows parent components pass down (i.e., “forward”) refs to their children. Using forwardRef in React gives ...

Simple example usage of React.forwardRef() - gists · GitHub

Forward ref means forward the control of some elements to outside (consumer) component. So the parent can controls something inside the forwardref (child) ......