I'm facing an issue with my React code for uploading an image. It doesn't seem to be working and I can't figure out why. Can someone please assist me?
return (
<div>
<FormContainer>
<h1>Edit Product</h1>
{loading ? <Loader /> : error ? <Message variant='danger'>{error}</Message>
: (
<Form onSubmit={submitHandler}>
<Form.Group controlId='image'>
<Form.Label>Image</Form.Label>
<Form.Control
type='text'
placeholder='Enter image'
value={image}
onChange={(e) => setImage(e.target.value)}
>
</Form.Control>
<Form.File
id='image-file'
label='Choose File'
onChange={uploadFileHandler}
custom
>
</Form.File>
{uploading && <Loader />}
</Form.Group>
<Button type='submit' variant='primary'>
Update
</Button>
</Form>
)}
</FormContainer >
</div>
)
The issue seems to be related to the Form.File component because when I remove it, the form loads successfully.
Below is the error message I see in the console:
react-dom development js 28439 Uncaught Error:
Element type is invalid:</p>
expected a string (for built-in components)
or a class/function (for composite components) but got:
undefined.
You likely forgot to export your component
from the file it's defined in,
or you might have mixed up default and named imports.
Check the render method of `ProductEditScreen`.