I got this code:
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>
)
}
And it returns me this:
"'Navbar' cannot be used as a JSX component."
"Its return type 'void' is not a valid JSX element.ts(2786)"
I don't know what I'm doing wrong.
As Antonio rightly pointed out, the issue is a spare closing bracket before returning the JSX.
This is equivalent to returning undefined, which is not valid JSX for React, hence the error message.
To find those issues it is a good idea to autoformat your code, either using an autoformatter like Prettier, or by triggering an Autoformat on demand. Here is how you can do it in VSCode:
Cmd+Shift+P (MacOS) or Ctrl+Shift+P to open the Command box, then type "Format Document"
Or use the direct shortcut Option/Alt+Shift+F
This assumes VSCode found out the right language of your file (which is usually done based on the file extension).