destructuring-function-argument.md

id	sidebar_label	title	description	keywords	version	image
destructuring-function-argument	Destructuring function argument	Destructuring Function Argument	Destructuring function argument | React Patterns, techniques, tips and tricks in development for React developers.	destructuring function argument child component reactpatterns react patterns reactjspatterns reactjs patterns react reactjs react techniques react tips and tricks	Destructuring function argument	/img/reactpatterns-cover.png

Destructuring can be applied to function arguments that are objects or arrays.

For example

Without destructuring.

function Modal(props) {
  var onClickNext = props.onClickNext
  var step = props.step

  return (
    <div>
      <h1>Step {step} - Name</h1>
      <Button onClick={onClickNext}>Next</Button>
    </div>
  )
}

This function expects a single object as an argument and it is destructured into onClickNext and step.

function ModalName({ onClickNext, step }) {
  return (
    <div>
      <h1>Step {step} - Name</h1>
      <Button onClick={onClickNext}>Next</Button>
    </div>
  )
}