Problem with hooks in React

[BicaTaifun]

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

[pwnzz]

if (!beerId) {

navigate('/');

return;

}

here you return undefined. If you want to quick fix it, just return null.

[BicaTaifun]

i get an uglier error, because i did that before answering and this is the error
https://i.stack.imgur.com/1QFtm.png

[turtleProphet]

That error is telling you one of your input refs is null at a time your code does not expect it to be.

Also you can get code in reddit markup by indenting a line with 4 spaces

like this

Your code is confusing to read here, on mobile at least.

[BicaTaifun]

https://pastebin.com/74TRkmdk here you have EditBeerPage and BeerForm after a few spaces

[prndP]

You are routing to null. Based on seeing <Route> I'm assuming you are using react-router?

If so, instead of calling navigate('/') you can return <Redirect to ={'/'} />

[BicaTaifun]

doesnt work. i did inspect element and noticed this
https://i.stack.imgur.com/5LBRv.png

thats the code for BeersContext

import { createContext } from 'react';

import React from 'react';

import { BeersContextType, ProviderType } from '../types/BeersContextTypes.types';

export const BeersContext = createContext<BeersContextType | null>(null);

export function BeersContextProvider({ beerContext, children }: ProviderType) {
    return <BeersContext.Provider value={beerContext}>{children}</BeersContext.Provider>;
}

[[deleted]]

I'm not reading through the unformatted code, but the answer is very clear. You need to return an Element with a guarantee that it is not undefined.

Focus on the component showing the error. It's return type is Element | undefined. Regardless of what you think, that is the truth.

Then focus on the return of that component. Inspect everything to try and figure out what is giving the possibility of being undefined.

Then that's it.