i'm new to react and started working on a Single page web app with nodejs backend and a simple react with react-bootstrap and react-router-dom front-end, i've learned Functional components and Class Components, everything worked fine for me, until i got this strange error when i try to render a Functional component.
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.
The error is triggered when i try to render this functional component.
import React, { useState } from 'react' import { Row, Col, Form } from 'react-bootstrap'; export default (props) => { const [clans, setClans] = useState([]); return(<> <div> <Row className="pt-4"> <Col md={12}> <Form.Input type="text" placeholder="Search" /> </Col> </Row> </div> </>); }
and here is where i call for it ( component={Clanes}
)
import React from 'react' import { Route, Switch } from 'react-router-dom'; //paginas import Home from './page/Home'; import NuevoClan from './page/NuevoClan'; import Registrarse from './page/Registrarse'; import Clanes from './page/Clanes'; export default ()=>{ return (<> <Switch> <Route exact={true} path='/' component={Home}/> <Route path='/clanes' component={Clanes}/> // this route can't be rendered <Route path='/nuevoclan' component={NuevoClan}/> <Route path='/registrarse/:clan?' component={Registrarse}/> </Switch> </>); }
It should be noted that I have other functional components in the project with the same structure that render without problems. NuevoClan & Registrarse
uses the same functional component structure. Home
is a Class component.
i started thinking is a cache problem but i can't find anything related to react cache cleaning
I would triple check this line
import Clanes from './page/Clanes';
Also check the file name of Clanes and the extension. Make sure there isn't a space in the name.
Note: The fragment around the div is unnecessary.
Ok, i feel ashamed. The problem was the component Form.Input does not exists. so it couldn't be rendered and passed to the Route. then i replaced <Form.Input type="text" placeholder="Search" />
to <Form.Control type="text" placeholder="Search" />
and everything was solved
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.