Tengo este código:
function searchData(searchWord: any) { if (originalData.length > 0) { if (searchWord !== "") { setDataList([...originalData.filter((svc: any) => removeAccent(svc.name.toLowerCase()) .includes(removeAccent(searchWord.toLowerCase()))),]); } else { setDataList([...originalData]); } } } return ( <div> <Navbar currentUser={props.currentUser} setCurrentUser={props.setCurrentUser} /> <div style={{ paddingTop: "80px", marginBottom: "3rem", minHeight: "90vh" }}> <div className="text-center header"> <h1 className="title">Tu agente de reserva personal</h1> <h4 className="title">Consulta servicios y agenda citas en línea</h4> </div> <Row className="justify-content-center text-center mt-5"> <Col xs="11" sm="8" md="7" lg="6" xl="5"> <h1 className="title">Nuestros prestadores de servicios. </h1> <FormControl onChange={e => searchData(e.target.value)}/> </Col> </Row> <CardList data={dataList}></CardList> </div> <Footer /> </div> ) }Y me devuelve esto:
"'Navbar' no se puede usar como un componente JSX".
"Su tipo de retorno 'vacío' no es un elemento JSX válido.ts(2786)"
No sé qué estoy haciendo mal.
Como bien señaló Antonio, el problema es un soporte de cierre de repuesto antes de devolver el JSX.
Esto es equivalente a devolver undefined, que no es JSX válido para React, de ahí el mensaje de error.
Para encontrar esos problemas, es una buena idea formatear automáticamente su código, ya sea usando un formateador automático como Prettier, o activando un Autoformato a pedido. Así es como puede hacerlo en VSCode:
Cmd + Shift + P (MacOS) o Ctrl + Shift + P para abrir el cuadro de comando, luego escriba "Formatear documento"
O use el atajo directo Opción/Alt + Shift + F
Esto supone que VSCode descubrió el idioma correcto de su archivo (lo que generalmente se hace en función de la extensión del archivo).