Gutenberg passing block attributes to component in ES6/ESNext

I saw many examples on how to pass props from a block component to another component but they all use ES5 syntax.

In ES6 the edit function when registering a block looks like this:

edit( { attributes, className, setAttributes } ) {
const { title, url, image, content } = attributes;

…etc

I want to pass the attributes and setAttributes to a component. Would this syntax be correct?

<MyComponent { …{setAttributes, …attributes } } />

Then in my component would I access them like so: ?

class MyComponent extends Component {
constructor( props ) {
super( …arguments )
}
render() {
const { title, url, image, content } = this.props.attributes;
const { setAttributes } = this.props;

…etc

There are many ways to do it and not sure which is recommended.

Read more here:: Gutenberg passing block attributes to component in ES6/ESNext

Leave a Reply

Your email address will not be published. Required fields are marked *