React component with function

Question

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>
      );
  }
}

Lyubomir · Accepted Answer · 2017-02-07 15:58:20Z

You're almost there, just replace <OverlayButton ... /> with <this.OverlayButton ... />

Strictly speaking, in response to the other answer (which is also correct), there is no need to call it as a function, since you could rely on JSX to do it for you.

Here an example.

class Widget extends React.Component {

  OverlayButton(props) {
     return (
       <div>
         Button
       </div>
     );
  }

  render() {
    return (
      <div>
       <this.OverlayButton />
      </div>
    );
  }
}

ReactDOM.render(
  <Widget />,
  document.getElementById('container')
);

With that being said, I'd probably wouldn't define OverlayButton as an instance method of a class, but rather move it on top of the class and simply define it as a function... something like this:

const OverlayButton = (props)=> {
  return (
    <div>
      Button
    </div>
  );
}

and then

class Widget extends React.Component { 
   ...

   render() {
     return <OverlayButton ... />
   } 
}

dfsq · Accepted Answer · 2017-02-07 15:36:50Z

2

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>
      );
  }
}

answered Feb 7, 2017 at 15:36

dfsq

193k26 gold badges244 silver badges261 bronze badges

5 Comments

martin Over a year ago

Yup that did it - it's not quite how discribed at fb docs - who cares. Thanks

dfsq Over a year ago

@TareqAl-Zubaidi Yes, but in case of component usage I would move OverlayButton as separate component/function, not same Widget method.

Lyubomir Over a year ago

you don't have to, but it's a better design

Tareq Over a year ago

@leo of course it is but it is good to know the possibilities

Lyubomir Over a year ago

exactly... he only suggested a possibility without contradicting with your suggestion:-)

Collectives™ on Stack Overflow

React component with function

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related