Prop de-structuring, arrow function component for Dropdown

[ericauv]

https://github.com/dustinirving/employee-directory/blob/master/src/components/Dropdown/index.js

export default Dropdown = (props) => {

const { orderHandler } = props;

  return (
    <div className='dropdown'>
...
        <button
          className='dropdown-item'
          onClick={() => orderHandler('id')}
        >
    ID
</button>
 <button
          className='dropdown-item'
          onClick={() => orderHandler('first')}
        >
          First Name
        </button>
        <button
          className='dropdown-item'
          onClick={() => orderHandler('last')}
        >
          Last Name
        </button>
        <button
          className='dropdown-item'
          onClick={() => orderHandler('department')}
        >
          Department
        </button>
        <button
          className='dropdown-item'
          onClick={() => orderHandler('position')}
        >
...

[dustinirving]

Thanks man, makes sense to destructure the props. Is there any value in making the component an arrow function and exporting it inline instead of exporting it at the bottom? Definitely makes sense to create arrow functions inside of the component, so that you don't need to bind them.

[dustinirving]

Also do you use a visual studio code extension for snippets?

[ericauv]

Also do you use a visual studio code extension for snippets?

I haven't used one in a while, but when I worked more on my own projects I did mainly to make skeletons of components with propsTypes. I can't find which one I used to use though -- most likely the top react snippet extension

[ericauv]

Thanks man, makes sense to destructure the props. Is there any value in making the component an arrow function and exporting it inline instead of exporting it at the bottom?

I'm not 100% sure if there's any benefit -- but is faster (to write)/easier