react javascript arrow function without arrows?

Question

I don't understand how this can work in javascript

renderMarkButton(type, icon) {

it looks like an arrow function, but without the arrows. Here's the context:

class HoverMenu extends React.Component {

  renderMarkButton(type, icon) {
    const { editor } = this.props
    return (
      <div className="editorButton" 
            onMouseDown={event => this.onClickMark(event, type)}>
        <FontAwesomeIcon color="#666" active={isActive} 
            className="editorButton" icon={icon}  />
        </div>
    )
  }
  render() {
    return (
      <div>
        {this.renderMarkButton('bold', {...faBold})}
      </div>
    )
  }
}

I'm also confused by the

  const { editor } = this.props

which comes from Slate, I believe. I would have expected this.props to be {type,icon} in this case.

`renderMarkButton` is a class method, and `const { editor } = this.props` is using 'destructuring' to retrieve `this.props.editor`. — Joe Clay, Feb 01 '19 at 10:34

score 8 · Answer 1 · answered Feb 01 '19 at 10:34

8

Regarding your questions:

renderMarkButton(type, icon) { is just the es6 class syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
const { editor } = this.props is called "destructuring". You can read about that here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

hope that helps :)

answered Feb 01 '19 at 10:34

Fabian

748
2
11
20

3

*es6 class syntax*, its actually a method of a class – Rajesh Feb 01 '19 at 10:35
2

methods inside the class dont need the function keyword. – MeanMan Feb 01 '19 at 10:36
@breytex how he can access `this.props` inside that `renderMarkButton`? – Maheer Ali Feb 01 '19 at 10:40
1

@MaheerAli `this.props` and `this.state` are globally available in each react component. Read more here :) https://reactjs.org/docs/components-and-props.html – Fabian Feb 01 '19 at 10:42
@breytex Thanks – Maheer Ali Feb 01 '19 at 10:50
For the es6 syntax, I also found a page that gives syntax specific to react (no constructor, no new keyword...): https://reactjs.org/docs/faq-functions.html – Francis Feb 02 '19 at 12:17

Estus Flask · Accepted Answer · 2019-02-01T11:25:45.947

Arrow and bound methods are useful for passing them as callbacks to be called later:

<Component onClick={this.clickHandler}/>

This isn't the case for renderMarkButton because it's called in a place where it's used with correct this context:

this.renderMarkButton('bold', {...faBold})

renderMarkButton is class prototype method. It doesn't work like arrow function because it isn't bound to the context. Calling it with wrong context would result in error because there would be no this.props object:

const unboundFunction = this.renderMarkButton;
unboundFunction('bold', {...faBold});

score 0 · Answer 3 · answered Feb 01 '19 at 10:35

This is a special syntax according to new class keyword which will let you create classes.

Basically, those are methods of that specific class and you can't define any other method outside of the class using that specific syntax.

For more information, consider MDN as your best partner.

react javascript arrow function without arrows?

3 Answers3