I have a project about a beer wishlist in which I used React. The problem is I get this error
TS2786: 'EditBeerPage' cannot be used as a JSX component.
Its return type 'Element | undefined' is not a valid JSX element.
Type 'undefined' is not assignable to type 'Element | null'.
32 | <Route path='/' element={<DisplayBeersPage />} />
33 | <Route path='/addBeer' element={<AddbeerPage />} />
> 34 | <Route path='/editBeer' element={<EditBeerPage />} />
| ^^^^^^^^^^^^
35 | </Routes>
36 | </BrowserRouter>
37 | </BeersContextProvider>
and I don’t know how to fix this. I can provide more detail about my code if it is needed.
import { BeersContext } from '../../contexts/BeersContext';
import { BeerForm } from '../../features/CRUD operations/Beer form/BeerForm';
import { Layout } from '../../shared/components/layout/layout';
import { Button } from '../../shared/components/button/button';
import { Beer } from '../../models/Beer';
import React from 'react';
import { useContext, useRef } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
function handleOnClick(
idInput: React.RefObject<HTMLInputElement>,
nameInput: React.RefObject<HTMLInputElement>,
manufacturerInput: React.RefObject<HTMLInputElement>,
typeInput: React.RefObject<HTMLInputElement>,
urlInput: React.RefObject<HTMLInputElement>,
) {
if (!idInput.current || !nameInput.current || !manufacturerInput.current || !typeInput.current || !urlInput.current)
throw new Error('Inputs references are null');
if (!idInput.current.value || !nameInput.current.value || !manufacturerInput.current.value || !typeInput.current.value || !urlInput.current.value)
throw new Error('You must provide values for each field!');
const beerId: number = parseInt(idInput.current.value),
beerName: string = nameInput.current.value,
beerManufacturer: string = manufacturerInput.current.value,
beerType: string = typeInput.current.value,
beerUrl: string = urlInput.current.value;
return new Beer(beerId, beerName, beerManufacturer, beerType, beerUrl);
}
export function EditBeerPage() {
document.title = 'Edit Beer';
const idInput = useRef<HTMLInputElement>(null);
const nameInput = useRef<HTMLInputElement>(null);
const manufacturerInput = useRef<HTMLInputElement>(null);
const typeInput = useRef<HTMLInputElement>(null);
const urlInput = useRef<HTMLInputElement>(null);
const navigate = useNavigate();
const beersContext = useContext(BeersContext)!;
const { beerId } = useParams();
if (!beerId) {
navigate('/');
return;
}
const givenBeer = beersContext.beers.find((beer: Beer) => beer.getID() === parseInt(beerId));
console.log('Given Beer:', givenBeer); // Log the value of givenBeer
const handleOnClickWrapper = () => {
try {
const newBeer = handleOnClick(idInput, nameInput, manufacturerInput, typeInput, urlInput);
beersContext.removeBeer(newBeer.getID());
beersContext.addBeer(newBeer);
navigate('/');
} catch (error) {
alert(error);
}
};
return (
<Layout>
<div className='main-page-container'>
<BeerForm
idInput={idInput}
nameInput={nameInput}
manufacturerInput={manufacturerInput}
typeInput={typeInput}
urlInput={urlInput}
givenBeer={givenBeer}
/>
<Button type='submit' buttonMessage='Edit Beer' onClick={handleOnClickWrapper} />
</div>
</Layout>
);
}
thats the code for the EditBeerPage part.
the project is correctly created using npm create-react-app lab1 –template typescript. I use Visual Studio Code.
Tried editing EditBeerPage part of the code and others, changing from undefined to null and other things, but none worked. I installed the latest versions of react-router and react-dom. ChatGPT confirmed EditBeerPage return valid JSX components
2
Answers
this is what i get if i try to add null. i added it before and saw this error, i thought i did something wrong
As the error tells you,
<Route path='/editBeer' element={<EditBeerPage />} />
is expecting aJSX.Element
ornull
for theelement
prop. CurrentlyEditBeerPage
is conditionally returningundefined
when there is nobeerId
.The problem is here:
If you return
undefined
, TypeScript considers this a possibility and tells you about it before you run the code.Try changing it to:
As for the second issue you are having with the
useRef
being null, I believe the problem is here:You should add optional chaining to check for null values: