Issue with onClick in React component

Question

I have a search result component that contains a div that, when clicked, is supposed to open a modal. Here's the relevant code below:

const createClickableDiv = function(props){
  if(props.searchType === 'option1'){
    return (
      <div onClick={this.onDivClick}>
       <div>Some content</div>
      </div>
    );
  }else if(props.searchType === 'option2'){
    return (
      <div onClick={this.onDivClick}>
       <div>Some other content</div>
      </div>
    );
  }
  return (<div className="result-empty"></div>);
};



class SearchResultItem extends Component{
  constructor(props){
    super(props);
  }
  onDivClick(){
    AppUIActions.openModal((<Modal />));
  }
  render(){
    const clickableDiv = createClickableDiv(this.props);
    return (
      <div>
        {clickableDiv}
      </div>
  }
}

When I load the page, nothing shows up. However, when I remove onClick={this.onDivClick} from the divs, everything renders correctly, just without the desired click functionality. I put a try-catch around the code in the createClickableDiv function and it's saying this is undefined. I'm not really sure where to go from here.

Thanks!

wintvelt · Accepted Answer · 2015-10-12 22:06:48Z

3

this. sometimes behaves strangely. When your function createClickableDiv is called, this no longer refers to your SearchResultItem but to the createClickableDiv, which does not have the function onDivClick defined.

Try changing the function call to createClickableDiv(this), to pass pointer to your complete SearchResultItem, and change the function itself to:

const createClickableDiv = function(caller){
  if(caller.props.searchType === 'option1'){
    return (
      <div onClick={caller.onDivClick}>
       <div>Some content</div>
      </div>
      // etc..

Maybe that would work.

edited Oct 12, 2015 at 22:06

answered Oct 12, 2015 at 21:52

wintvelt

14.1k3 gold badges41 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issue with onClick in React component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related