martin martin - 1 year ago 85
Javascript Question

React component with function

I have a react class with some div and I want to add some extra HTML from a function.

When I run this I get an error saying that OverlayButton is not defined. My inspiration is from HERE

I know that I can split the OverlayButton out in a separate class, but it is just a dumb button with no logic.

export default class Widget extends React.Component {

OverlayButton(props) {
return (
<div
className={props.className}
onClick={props.handler}
ref='select'>
<i className="material-icons">
{props.icon}
</i>
</div>
)
}

render() {
return (
<div>
<div className="photo-widget-content"></div>
<div className="photo-widget-header"></div>
<img src={this.props.photo.url}></img>
return <OverlayButton icon="check" handler="" className=""/>
</div>
);
}
}

Answer Source

If you want to use OverlayButton as a function (method) you need to call it inside {} braces:

export default class Widget extends React.Component {

  OverlayButton(props) {
     return (
      <div
        className={props.className}
        onClick={props.handler}
        ref='select'>
          <i className="material-icons">
            {props.icon}
          </i>
      </div>
      )
  }

  render() {
    return (
      <div>
        <div className="photo-widget-content"></div>
          <div className="photo-widget-header"></div>
          <img src={this.props.photo.url} />
          {this.OverlayButton({
            icon: 'check',
            handler: function() {},
            className: ''
          })}
      </div>
      );
  }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download