How to access children component ?

[goof03]

Sorry for the silly question but i can find doc on this …
Ok i use react starter kit (after many customisation to get it work with material-ui). I have two component header with AppBar and Navigation with a LeftBar (Same as in react starter kit sample). For now when i click on AppBar menu button i can handle the event but how to get the refence to LeftBar for toggle it in my header component ?

Thanks for your help

[chbdetta]

I think ref attribute is what you need. http://facebook.github.io/react/docs/more-about-refs.html

[goof03]

thanks but i can't acces it with refs because it's not in the same class i think … I can't access my own method too in children class component I'm stuck :(

http://pastebin.com/J4AU2fKP

[chbdetta]

I can't run your code. maybe you can create a jsfiddle. I edit out all the dependencies and keep the React part down and it works ok.
ref works correctly in native React, whether they are in the same class.

[goof03]

i have too much files for jsfiddle i use react starter kit. I know refs working i can get «nav» but cant get leftNav (define in Navigation) in header
I find a guy with same problem here : http://hackingbeauty.com/material-ui-left-nav/

[chbdetta]

If you are trying to access leftNav from Header, you could try doing like this
this.refs.nav.refs.leftNav. refs only contains the direct children not all the descendants.
Hope this help :D

[goof03]

I already try this without success … :(

[zalmoxisus]

@goof03, you may find an example in this branch: https://github.com/zalmoxisus/boilerplate/tree/Material-UI. It works like this: https://github.com/zalmoxisus/boilerplate/blob/Material-UI/src/components/LeftNav.js

[goof03]

Thanks for your help @zalmoxisus but maybe I'm completly dumb i try your method but i cant access the leftNav toggle method in my header component :
"Uncaught TypeError: _this.refs.nav.toggle is not a function"

I try everyting :
http://pastebin.com/12iGJ6Q5

Perhaps React is not for me I should stay on backbone or angularjs … :,(

[zalmoxisus]

@goof03, I do not see anything wrong there. What version of React do you use? Do you get the error from header.js or from Navigation.js?

[goof03]

@zalmoxisus, in header.js i can't access the toggle function. I use React 0.14.0-rc1 in react starter kit

[goof03]

Anyway i give up i use polymere now for my app too much bugs … Yesterday, my arch linux update to node.js 4.0.0 and i get segmentation fault on startup with react.

At least, I will have tried, perhaps for another project in some month …

[oliviertassinari]

npm rebuild to fix the seg fault

[zalmoxisus]

@goof03, so that's the reason. React 0.14 changed the way of using refs, and, AFAIK, Material-UI isn't ready yet for 0.14. In 0.13.x it would work well.

[goof03]

@zalmoxisus Yes i know but i use material-ui-io or try the #1647 but without success

[goof03]

@oliviertassinari Thanks and do you have a solution for :
babel-node --eval "require('./tools/start')().catch(err => console.error(err.stack))" too :)

[newoga]

@goof03 I'm going to close this issue. If you have any issues with your project setup, you may get a prompter response on StackOverflow. If you are getting any errors from material-ui, feel free to file a new issue. Thanks!