passing all props with class and stateless component

Question

Are those 2 components below identical? What is the purpose is I'm trying to do a wrapper to customize a component. does

const myComponent = (props) => {
    return (
        <OtherComponent {...props} />
    )
}

and

class myComponent extends Component {
    const { ...rest } = this.props
    render() {
        return <OtherComponent {...rest} />
    }
}

{...props}

identical to

const { ...rest } = this.props ?

Answer 1

Yes, both ways of writing it are identical. Every key/value pair in this.props will end up in the rest variable.

Instead of writing const { ...rest } = this.props you can use this.props directly instead.

const MyComponent1 = (props) => {
  return (
    <OtherComponent {...props} />
  )
}

class MyComponent2 extends Component {
  render() {
    return <OtherComponent {...this.props} />
  }
}