____Notification Index: -----Please ignore this issue. ----

[bchenSyd]

How to refer to the DOM element within JSX props (without using ref)?
same as: https://discuss.reactjs.org/t/passing-this-to-the-onclick-callback/437

class myComponent extends Component{
 constructor(props){
   this.state={ selectedOption: 'option1' }
}
   getClassName(e){
           return e.target.textConent === this.state.selectedOption ? 'selected' :''      
   }

   onNodeSelected(e){
      this.setState({selectedOption: e.target.contextText})
}


return(
   <div>
     {/* I was (and still am ) very much tempted  to pass `this` as `???` to refer to the current DOM element */}
       <button className={ getClassName(??????)   onClick={this.onNodeSelected.bin(this)} >option1</button>
       <button className={ getClassName(??????)}  onClick={...>option2</button>
       <button className={ getClassName(??????)}  onClick={...>option3</button>
       <button className={ getClassName(??????)}  onClick={...>option4</button>
  </div> 
  )
}

23/2/2017 update:
the answer is no. you can't use this. this always stands for the current component no matter where you use it. the correct approach is to pass the this object explicitly. e.g.

<button className={ getClassName('option1')  onClick={this.onNodeSelected.bin(this)} >option1</button>

you know that this refer to option1 so you can pass the value directly without using this keyword
@bochen2014

[bchenSyd]

ok. figure out one..

class myComponent extends Component{
 constructor(props){
   this.state={ selectedOption: 'option1' }
}

   onNodeSelected(e){
      this.setState({selectedOption: e.target.contextText})
}


return(
   <div>
       <button className={ 'option1' === this.state.selectedOption? 'active' :''  }   onClick={this.onNodeSelected.bin(this)} >option1</button>
       <button className={ 'option2' === this.state.selectedOption? 'active' :''  }   onClick={...>option2</button>   
  </div> 
  )
}

[enaqx]

@bochen2014 If I understand correctly you are trying conditionally manipulate classnames. Have you explored classnames module?

https://github.com/JedWatson/classnames#usage-with-reactjs

[jimfb]

This is a usage question. We use github to track bugs in the react core, rather than usage questions. A more appropriate place for usage questions is StackOverflow, so I'm going to close out this issue, but feel free to continue the conversation on this thread or move the discussion over to StackOverflow.

[bchenSyd]

nodejs event loop: https://www.youtube.com/watch?v=8aGhZQkoFbQ

how react render works: https://github.com/facebook/react/issues/-7761
child normally gets re-rendered when parent re-rerenders: webpackbin
e.target => e.currentTarget in clickCallbacks: https://discuss.reactjs.org/t/passing-this-to-the-onclick-callback/437
React Context and ShouldComponentUpdate: http://www.webpackbin.com/EJ9cD3QvG
#2517
don't call setState within componentWillUpdate: https://github.com/DevelopmentArc/react-indepth/issues/-3#issuecomment-230870219
controlled input: http://www.webpackbin.com/410dcMDKf
Refs don't work on Stateless Components : #4936
Ref with Stateless Component: #7776 (comment)
better way of doing findDomNode(this).children[0].focus: use ref example
provideController:{ open, close, focus }: ref replacement
don't re-render your store! reduxjs/react-redux#259
react-hot-loader with redux: gaearon/react-hot-loader#388
promise basics:webpackBin sample

React.findDOMNode v.s. this.refs.item: mui/material-ui#1594
Set error message on general error page: reduxjs/react-redux#562
react-hot-loader re-renderd router: reactjs/react-router-redux#179
why injecting <script src=xyz> inside your JSX doesn't work ? neither does

<div dangerouslySetHTML={{__html:'<script>alert('won't get executed`)</script>'}} />

https://github.com/facebook/react/issues/-654

---

redux
dispatch twice and re-render:https://github.com/reactjs/react-redux/issues/-549

typescript
(All fields in JavaScript (and in TypeScript) can have the value null or undefined)
optional field and nullables : https://stackoverflow.com/a/17220359/6560291
how does typings work :https://github.com/typings/typings/issues/-748
the evolution of type definition in TypeScript: typings/typings#746
Boolean type literal support : https://github.com/Microsoft/TypeScript/issues/-10432
type assertion if(pet){ (pet).swim() }): https://www.typescriptlang.org/docs/handbook/advanced-types.html

---

jest mock named import: jestjs/jest#1557
mock component method: https://github.com/airbnb/enzyme/issues/-944

---

Relay Classic
relay deferred query: https://github.com/facebook/relay/issues/-288
relay deferred query-official: https://github.com/facebook/relay/issues/-971
relay send too many node queries: https://github.com/facebook/relay/issues/-724
relay parent container override child variables: https://github.com/facebook/relay/issues/-1138

[bchenSyd]

Relay Modern
static queries/ahead of time code generation: https://github.com/facebook/relay/issues/-1806
getVariables(): https://github.com/facebook/relay/issues/-1828
subscriptions: https://github.com/facebook/relay/issues/-1655
graphql-js subscription support : https://github.com/graphql/graphql-js/pull/-189#issue-109368761
mutation: https://github.com/facebook/relay/issues/-1808
typescript: https://github.com/facebook/relay/pull/-1710#issuecomment-309566711

flow
disable global variables: https://github.com/flowtype/flow-for-vscode/issues/-140
module.name_maper: https://github.com/facebook/flow/issues/-2092
vscode terminal: https://github.com/flowtype/flow-bin/issues/-77

webpack: vendor split
https://github.com/webpack/webpack/issues/-2431#issuecomment-293281981
multi output path: https://github.com/webpack/webpack/issues/-1189#issuecomment-156576084

babel:
babel-runtime v.s babel-polyfill and why passPerPreset is a bad idea
https://github.com/babel/babel/issues/-2877#issuecomment-245402025
re-export issue: https://github.com/babel/babel/issues/-6795
ascii art
licecap
https://openedx.atlassian.net/wiki/spaces/FEDX/overview

[bchenSyd]

style-guidist
updatewebpack: https://github.com/styleguidist/react-styleguidist/issues/-110#issue-144363116

argv tools : optimist in http-server; commander in material-ui/next and minimist in material-ui/master , kindred-racing-client-uk uses yargs

docker
copy files out of container: https://github.com/moby/moby/issues/-10947#issuecomment-123662215

ramda
ramda v.s lodash: https://gist.github.com/vvgomes/451ea5ca2c65e87c92e4

ngReact: https://plnkr.co/edit/INGGHD?p=preview

github search syntax: https://help.github.com/articles/searching-issues-and-pull-requests/
pending my code review: review-requested:bochen2014 is:pr
list my reviews: reviewed-by:bochen2014 is:pr
find the issue that I participated, and it's about vscode not showing underscore in ubuntu: commenter:bochen2014 is:issue vscode

[bchenSyd]

ref with stateless componenents. use function scope variables as the storage of refs

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity
} from 'react-native';
import { color, fontSize } from '../../common';

const optionLabels = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'];
const QuizAnswerOptionComponent = (props) => {
// ***************************************  
  let _text = null;
// ***************************************  
    const handlePressed = e => {
        _text.setNativeProps({
            style: {
                color: isCorrectAnswer ? color.green : color.red
            }
        });

    }

    const { index, text, hint, isCorrectAnswer } = props;
    return <TouchableOpacity onPress={handlePressed}>
        <Text ref={ref => _text = ref} style={styles.optionText}>{optionLabels[index] + '): ' + text}</Text>
    </TouchableOpacity>
}

const styles = StyleSheet.create({
    optionText: {
        fontSize: fontSize.default
    }
})
export default QuizAnswerOptionComponent;