0
Guys are developing a system in React that will consume a Rest api in Django. For development I am using the React, React-router-dom, mdbreact. I was making a form to create user account and when I went to add the component in the form began to appear a talking error that is in the routes. Does anyone have any notion of how to solve ?
class ContentNewAccount extends React.Component{
render(){
return (
<div className="col-6">
<form autoComplete="off">
<div className="row">
<div className="col">
<MDBInput label="Nome" />
</div>
<div className="col">
<MDBInput label="Sobrenome" />
</div>
</div>
<div className="row">
<div className="col">
<MDBInput label="Cpf" />
</div>
<div className="col">
<MDBInput label="Rg" />
</div>
</div>
<div className="row">
<div className="col">
<MDBInput label="Contato" />
</div>
<div className="col">
<MDBSelect>
<MDBSelectInput selected="Choose your option" />
<MDBSelectOptions>
<MDBSelectOption disabled>Choose your option</MDBSelectOption>
<MDBSelectOption value="1">Option nr 1</MDBSelectOption>
<MDBSelectOption value="2">Option nr 2</MDBSelectOption>
<MDBSelectOption value="3">Option nr 3</MDBSelectOption>
</MDBSelectOptions>
</MDBSelect>
</div>
</div>
<div className="row">
<div className="col">
<label htmlFor="username" className="bmd-label-floating">Nome de usuário:</label>
<input type="text" id="username" className="form-control" />
</div>
<div className="col form-group">
<label htmlFor="email" className="bmd-label-floating">Email:</label>
<input type="email" id="email" className="form-control" />
</div>
</div>
<div className="row">
<div className="col form-group">
<label htmlFor="password1" className="bmd-label-floating">Senha:</label>
<input type="password" id="password1" className="form-control" />
</div>
<div className="col form-group">
<label htmlFor="password2" className="bmd-label-floating">Senha (Confirmação):</label>
<input type="password" id="password2" className="form-control" />
</div>
</div>
<button className="mr-1 primary-btn btn-raised">Cadastrar</button>
<button className="secondary-btn">Cancelar</button>
</form>
</div>
);
}
export default class NewAccount extends React.Component{
render() {
return (
<Base
children = {
<ContentNewAccount />
}
title="Cadastre-se agora! Faça parte da nossa comunidade! "
/>
);
}
This is the route code:
export default class Routes extends React.Component{
render(){
return (
<BrowserRouter>
<Switch>
<Route path="/" exact={true} component={App} />
<Route path="/nova-conta/" component={NewAccount} />
<Route path="/login/" component={Login} />
</Switch>
</ BrowserRouter>
);
}
Error:
Element type is invalid: 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
ContentNewAccount
.
Not missing a key? {
– Eliâ Melfior
Check If the import of the Contentnewaccount class was done in this class that makes the route.
– Leonardo Lima