Component cannot be used as a JSX component. Its return type 'void' is not a valid JSX element (React Hooks)

Question

I have a component that is a form, but when I want to use it I get an error. I don't see where the error is, it's a simple form. Maybe the error is in the props?

This is the component, the form:

interface FormTemplateProps {
    handleOnSubmit: (event: React.FormEvent<HTMLFormElement>) => void,
    handleInputChange: (event: React.FormEvent<HTMLInputElement>) => void,
    valueTitle: string,
    valueAuthor: string,
    valueContent: string,
    error: string
}

const FormTemplate = (props: FormTemplateProps) => {
    <div className="containerHomepage">
        <form className="formulari" onSubmit={props.handleOnSubmit}>
            <div className="containerBreadCrumb">
                <ul className="breadCrumb">
                    <li>Posts</li>
                </ul>
            </div>

            <div className="containerTitleButton">
                <input
                    className=""
                    type="text"
                    placeholder='Post title'
                    name="title"
                    value={props.valueTitle}
                    onChange={props.handleInputChange}
                ></input>
                <button
                    className="button"
                    type="submit"
                >Save</button>
            </div>

            <div className="containerEdit">
                <input
                    className="editAuthor"
                    type="text"
                    placeholder='Author'
                    name="author"
                    value={props.valueAuthor}
                    onChange={props.handleInputChange}
                ></input>
                <input
                    className="editContent"
                    type="textarea"
                    placeholder='Content'
                    name="content"
                    value={props.valueContent}
                    onChange={props.handleInputChange}
                ></input>

                {props.error !== "" ?
                    < ErrorMessage
                        message={props.error}
                    />
                    : null
                }
            </div>

        </form>
    </div>
};

And this is the other component, where I want to call that form:

const handleInputChange = (e: React.FormEvent<HTMLInputElement>) => {
        console.log((e.target as HTMLInputElement).value)
        setPost({
            ...post,
            [(e.target as HTMLInputElement).name]: (e.target as HTMLInputElement).value
        })
    };

    let navigate = useNavigate();

    const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        if (!post.title || !post.author || !post.content) {
            setError("¡No dejes campos vacíos!")
        } else {
            editPost(post);
            navigate("/");
        }
    }

    return (
        <div className="containerHomepage">
                < FormTemplate
                    handleOnSubmit={handleOnSubmit}
                    handleInputChange={handleInputChange}
                    valueTitle={post?.title}
                    valueAuthor={post?.author}
                    valueContent={post?.content}
                    error={error}
                />
        </div>
    );
};


// ========================================

export default Edit;

The message error is:

'FormTemplate' cannot be used as a JSX component. Its return type 'void' is not a valid JSX element.ts(2786)

Answer 1

Answer thanks to David Scholz: adding a return just before the first div of the form has fixed the problem!

const FormTemplate = (props: FormTemplateProps) => {
    return (
        <div className="containerHomepage">
            <form className="formulari" onSubmit={props.handleOnSubmit}>
                <div className="containerBreadCrumb">
                    <ul className="breadCrumb">
                        <li>Posts</li>
                    </ul>
                </div>

                <div className="containerTitleButton">
                    <input
                        className=""
                        type="text"
                        placeholder='Post title'
                        name="title"
                        value={props.valueTitle}
                        onChange={props.handleInputChange}
                    ></input>
                    <button
                        className="button"
                        type="submit"
                    >Save</button>
                </div>

                <div className="containerEdit">
                    <input
                        className="editAuthor"
                        type="text"
                        placeholder='Author'
                        name="author"
                        value={props.valueAuthor}
                        onChange={props.handleInputChange}
                    ></input>
                    <input
                        className="editContent"
                        type="textarea"
                        placeholder='Content'
                        name="content"
                        value={props.valueContent}
                        onChange={props.handleInputChange}
                    ></input>

                    {props.error !== "" ?
                        <ErrorMessage
                            message={props.error}
                        />
                        : null
                    }
                </div>

            </form>
        </div>
    )
};

export default FormTemplate;