jsx-spread-attributes.md

id	sidebar_label	title	description	keywords	version	image
jsx-spread-attributes	JSX spread attributes	JSX Spread Attributes	JSX spread attributes | React Patterns, techniques, tips and tricks in development for Ract developer.	jsx spread attributes jsx attributes reactpatterns react patterns reactjspatterns reactjs patterns react reactjs react techniques react tips and tricks	JSX spread attributes	/img/reactpatterns-cover.png

What is JSX Spread Attributes?

Spread attributes is a JSX feature, it's a syntax for passing all of an object's properties as JSX attributes.

For examples

If you know all the properties that you want to place on a component ahead of time, it is easy to use JSX.

const component = <Component foo={x} bar={y} />

If you don't know which properties you want to set, you might be tempted to add them onto the object later.

var component = <Component />;
component.props.foo = x // bad
component.props.bar = y // also bad

Now you can use a new feature of JSX called spread attributes.

let props = {}
props.foo = x
props.bar = y

const component = <Component {...props} />

The properties of the object that you pass in are copied onto the component's props. You can use this multiple times or combine it with other attributes. The specification order is important. Later attributes override previous ones.

let props = { foo: 'default' }
const component = <Component {...props} foo={'override'} />
console.log(component.props.foo) // 'override'