plugin development - Gutenberg blocks error: Each child in a list should have a unique "key" prop

admin管理员组

文章数量:1391955

I am learning building custom Gutenberg blocks in WordPress, Since reactjs is a new language to me, I would appreciate some help with the error below. Its a warning in the console

Warning: Each child in a list should have a unique "key" prop. See  for more information.
    in edit (created by Edit)
    in Edit (created by WithToolbarControls(Edit))

Below is a screenshot.

My Gutenberg javascript code is as below

const { registerBlockType } = wp.blocks;

registerBlockType('gutenberg-mwako/section', {

    title: 'Section',

    category: 'layout',

    attributes: {},

    edit() {
        return([
            <section>
                <div className="container">
                    <h2>Title here</h2>
                </div>
            </section>
        ])
    },

    save() {
        return(
            <section>
                <div className="container">
                    <h2>Title here</h2>
                </div>
            </section>
        )
    }
});

I am learning building custom Gutenberg blocks in WordPress, Since reactjs is a new language to me, I would appreciate some help with the error below. Its a warning in the console

Warning: Each child in a list should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.
    in edit (created by Edit)
    in Edit (created by WithToolbarControls(Edit))

Below is a screenshot.

My Gutenberg javascript code is as below

const { registerBlockType } = wp.blocks;

registerBlockType('gutenberg-mwako/section', {

    title: 'Section',

    category: 'layout',

    attributes: {},

    edit() {
        return([
            <section>
                <div className="container">
                    <h2>Title here</h2>
                </div>
            </section>
        ])
    },

    save() {
        return(
            <section>
                <div className="container">
                    <h2>Title here</h2>
                </div>
            </section>
        )
    }
});

• plugin-development
• theme-development
• block-editor

Share Improve this question asked Mar 12, 2020 at 10:03 muya.devmuya.dev 12511 gold badge11 silver badge77 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

You need to provide a key for the section element in your edit() function (which returns an array of elements):

edit() {
    return([
        <section key="my-key">
            <div className="container">
                <h2>Title here</h2>
            </div>
        </section>
    ])
},

本文标签： plugin developmentGutenberg blocks error Each child in a list should have a unique quotkeyquot prop