我已经在我的 React 网页中导入了 useState 但它仍然显示编译错误

Question

I have already imported the useState but it is still showing compilation error.

The name of my web page is CreatePost.js

import React, { useState } from 'react';

const createPost = () => {

    /* We will use the 'useState' hooks to get the value from the text fields. */
    const [title, setTitle] = useState("");
    const [body, setBody] = useState("");
    const [image, setImage] = useState("");

    
    const postDetails = () => {

        const data = new FormData();
        data.append("file", image);
        data.append("upload_preset", "insta-clone");
        data.append("cloud_name", "rishavsinghh-cloud");
        fetch("https://api.cloudinary.com/v1_1/rishavsinghh-cloud/image/upload", {
            method: "post",
            body: data
        }).then(res => res.json()).then(data => {
            console.log(data);
        }).catch(err => {
            console.log(err);
        });
    }

    return (
        <div className="card auth-card input-field" style={{ maxWidth:"500px", padding: "20px" }}>
            <h2 className="cardHeading">Create Post</h2>

            <input type="text" placeholder="Title" value={title} onChange={(event) => setTitle(event.target.value)} />

            <input type="text" placeholder="Body" value={body} onChange={(event) => setBody(event.target.value)} />

            <div className="file-field input-field">
                <div className="btn">
                    <span>Upload Image <i class="fa fa-upload"></i></span>
                    <input type="file" value={image} onChange={(event) => setImage(event.target.files[0])} />
                </div>
                <div className="file-path-wrapper">
                    <input className="file-path validate" type="text" placeholder="Upload image" />
                </div>
            </div>
            <button class="btn waves-effect waves-light #64b5f6 blue darken-1" onClick={ () => postDetails() } >Create Post <i class="fa fa-pencil"></i></button>
        </div>
    );
}

export default createPost;

The error I am getting is this:-

Answer 1

Just Change your component name from createPost to CreatePost . Because in react component name should start with Upper case letter.

Answer 2

change component name capital, like this CreatePost

1. https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type

Answer 3

Capitalize the Component Name

const CreatePost = () => {
//everything else
}
export default CreatePost

Answer 4

Capitalization of component names is a requirement in React so you need to change createPost to CreatePost and the error should be fixed.

More info from the ReactJs Docs: ( https://reactjs.org/docs/components-and-props.html )

React treats components starting with lowercase letters as DOM tags. For example, represents an HTML div tag, but represents a component and requires Welcome to be in scope.

Answer 5

This compilation error is due to the capitalization of the component name. Rename the component name from createPost to CreatePost . Also, make sure that your filename should have the same format as the component name.

For Example:

CreatePost.js