How to convert from react component to arrow function

Question

I was trying to convert the React component below to arrow function.

import { Jsme } from 'jsme'

export default class App extends Component {
  logSmiles(smiles) {
    console.log(smiles)
  }

  render () {
    return (
      <div>
        <Jsme height="300px" width="400px" options="oldlook,star"  onChange={this.logSmiles}/>
      </div>
    )
  }
}

I have tried doing this by converting react component to the arrow function. Need help

export const Jsme = () => {
    logSmiles =(smiles)=> {
        console.log(smiles)
      }
  return (
    <div>
      <Jsme
        height="300px"
        width="400px"
        options="oldlook,star"
        onChange={this.logSmiles}
      />
    </div>
  );
};

DaveVanFleet · Answer 1 · 2021-11-12T19:10:29.860

2

You're looking at the <App /> component, so it would look like this

import { Jsme } from 'jsme'

const App = () => {
  const logSmiles = (smiles) => {
    console.log(smiles)
  }

 return (
    <div>
      <Jsme height="300px" width="400px" options="oldlook,star"  onChange={logSmiles}/>
    </div>
  )
}

export default App;

edited Nov 12 '21 at 19:10

answered Nov 10 '21 at 12:40

DaveVanFleet

573
3
10

`this.logSmiles`? – Andy Nov 12 '21 at 15:57
1

good catch, should be `onChange={logSmiles}` – DaveVanFleet Nov 12 '21 at 19:09

score 0 · Answer 2 · answered Nov 10 '21 at 12:40

It should be:

export const Jsme = () => {
    const logSmiles = (smiles) => {
        console.log(smiles)
    }
    return (
      <div>
        <Jsme
          height="300px"
          width="400px"
          options="oldlook,star"
          onChange={logSmiles}
        />
      </div>
    );
};

How to convert from react component to arrow function

2 Answers2