destructuring-rest-or-spread-operator.md

id	sidebar_label	title	description	keywords	version	image
destructuring-rest-or-spread-operator	Destructuring rest/spread operator	Destructuring Rest/Spread Operator	Destructuring rest/spread operator | React Patterns, techniques, tips and tricks in development for Ract developer.	destructuring rest/spread operator child component reactpatterns react patterns reactjspatterns reactjs patterns react reactjs react techniques react tips and tricks	Destructuring rest/spread operator	/img/reactpatterns-cover.png

The ... rest operator gathers the rest of the items in the props object argument and puts them in the variable rest.

The ... rest in the JSX is actually JSX syntax for spreading the props in the the rest object into individual props.

For example

Without using rest/spread.

function Modal(props) {
  var onClick = props.onClick
  var show = props.show
  var backdrop = props.backdrop

  return (
    <Modal show={show} backdrop={backdrop}>
      <Button onClick={onClick}>Next</Button>
    </Modal>
  )
}

Destructuring rest/spread operator.

function Modal({ onClick, ...rest }) {
  return (
    <Modal {...rest}>
      <Button onClick={onClick}>Next</Button>
    </Modal>
  )
}