Bad setState call inside offcanvas component - reactjs

Question

I'm getting a bad setState() error inside the sidebar bootstrap offcanvas component. It says it can't update the component App() while rendering a different component sidebar() Sorry but I had to delete a large section of my code which was a fetch call. Thanks.
Error: index.js:1 Warning: Cannot update a component (App) while rendering a different component (Sidebar). To locate the bad setState() call inside Sidebar, follow the stack trace as described in
App.js
import React, {useEffect, useState} from 'react';
import './App.css';
import MovieTag from "./components/MovieTag/MovieTag";
import Sidebar from "./components/MovieTag/Sidebar";
interface Movie {
id: number,
poster_path: string,
title: number
}
function App() {
const [movies, setMovies] = useState([]);
const [genre, setGenre] = useState(0);
const [sort, setSort] = useState("popularity.desc");
const [page, setPage] = useState(1);
function GetMovies(genreId: number, sortBy: string, page: number){
setGenre(genreId);
setSort(sortBy);
setPage(page);
return (
<div className={'container'}>
<Sidebar filterByGenre={(genre: number) => {
setGenre(genre);
}}
sortBy={(sort: string) => {
setSort(sort);
}}
pageFilter={(page: number) => {
setPage(page);
}}
/>
<div className={'row'}>
{movies.map((movie: Movie) => {
return (
<MovieTag key={movie.id}
poster={movie.poster_path}
title={movie.title}
/>
)
})}
</div>
</div>
);
}
export default App;
Sidebar.js
function Sidebar(props: any) {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<React.Fragment>
<Button variant={'secondary'} onClick={handleShow}>Filter</Button>
<Offcanvas show={show} onHide={handleClose}>
<Offcanvas.Header>
<Offcanvas.Title>Filter</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<DropdownButton title={'Genre'} drop={'end'}>
<Dropdown.Item eventKey={1}><button onClick={props.filterByGenre(28)}>Action</button></Dropdown.Item>
</DropdownButton>
</Offcanvas.Body>
</Offcanvas>
</React.Fragment>
)
}

Answer 1

The problem is on Sidebar component which is calling a setState of its parent component while rendering on <Dropdown.Item eventKey={1}><button onClick={props.filterByGenre(28)}>Action</button></Dropdown.Item>
If you need to call the function onClick, then create an arrow function to it.
onClick={() => props.filterByGenre(28)}