How to put <PlainText> and <Button> components inside <Form> in Gutenberg block

I am writing a block where I need to render a form inside the editor. This is how I tried it:

edit: function( props ) {
        return(
            <Form
                method="get"
                className="search-form"
                <PlainText
                    title="search box"
                    placeholder="Search"
                    className="search-field"
                    type="text"
                    name="s"
                    readonly="true"
                />
                <PlainText
                    type="hidden"
                    name="type"
                    value="media"
                />
                <Button
                    type="submit"
                    title="search site"
                    className="search-submit"
                    value="&rsaquo;"
                    disabled="disabled"
                />
            />
        );
    },

But the watcher is complaining with the following (screenshot attached)

what is the right way to do it?

I am writing a block where I need to render a form inside the editor. This is how I tried it:

edit: function( props ) {
        return(
            <Form
                method="get"
                className="search-form"
                <PlainText
                    title="search box"
                    placeholder="Search"
                    className="search-field"
                    type="text"
                    name="s"
                    readonly="true"
                />
                <PlainText
                    type="hidden"
                    name="type"
                    value="media"
                />
                <Button
                    type="submit"
                    title="search site"
                    className="search-submit"
                    value="&rsaquo;"
                    disabled="disabled"
                />
            />
        );
    },

But the watcher is complaining with the following (screenshot attached)

what is the right way to do it?

• block-editor

Share Improve this question asked Feb 7, 2019 at 6:52 Subrata SarkarSubrata Sarkar 23955 silver badges1616 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

When an element doesn't have children it can be self-closing:

<Something something="123" />

Otherwise it needs to behave like normal html tag with an opening part: <Something> and a closing one: </Something>

edit: function( props ) {
    return(
        <Form
            method="get"
            className="search-form"
        >
            <PlainText
                title="search box"
                placeholder="Search"
                className="search-field"
                type="text"
                name="s"
                readonly="true"
            />
            <PlainText
                type="hidden"
                name="type"
                value="media"
            />
            <Button
                type="submit"
                title="search site"
                className="search-submit"
                value="&rsaquo;"
                disabled="disabled"
            />
        </Form>
    );
},