this is my home component with the bottomsheet code for my project when ever i click on
it. it open up the bottom sheet which have three rooms which when click on any of these
rooms it displays the content of that room
passing it through my bottom sheet component i am seeting up the onclick button that opens up each of the roo,s when clicked and here is the code but each time i clicl on it i have the error of BottomSheet.js:15 Uncaught TypeError: props.setItemsVisible is not a function
const [itemsVisible, setItemsVisible] = useState(true);
const [sheetVisible, setSheetVisible] = useState(false)
const [sheetCreateRoom, setSheetCreateRoom] = useState(false)
const [loaderVisibility, setLoaderVisibility] = useState(false)
const [cardId, setCardId] = useState(1);
return (
<>
{loaderVisibility ? (
<>
<Header/>
<Container>
<DailyCard/>
</Container>
<RoomInfoCard/>
<Action_Btn>
<button onClick={()=> setSheetVisible(true)} >
<AiOutlinePlus style = {{marginRight : "4px"}} />
Start a room
</button>
<button>
<BsGrid3X2Gap style ={{marginRight: "4px"}}/>
</button>
</Action_Btn>
<BottomSheet
sheetTitle = "start room"
setSheetVisible={(item)=> setSheetVisible(item)}
sheetVisible={sheetVisible}
cardDetail= {RoomCard.find((item)=> item.id === cardId)}
setItemVisible = {(item)=> setItemsVisible(item)}
setSheetCreateRoom = {(item)=>{
setLoaderVisibility(true);
setTimeout(()=>{
setSheetCreateRoom(item)
setLoaderVisibility(false)
}, 1000);
}}
/>
<BottomSheet
sheetTitle = "new room"
setSheetVisible = {(item)=> setSheetCreateRoom(item)}
sheetVisible = {sheetCreateRoom}
cardDetail = {NewRoomData}
setItemsVisible = {(item)=> setItemsVisible(item)}
/>
</>
import React from 'react';
import SwipeableBottomSheet from "react-swipeable-bottom-sheet";
import styled from "styled-components";
import StartRoom from './bottomSheets/StartRoom'
import NewRoom from "./bottomSheets/NewRoom";
export default function BottomSheet(props) {
return (
< >
<SwipeableBottomSheet open = { props.sheetVisible }
onChange = {
() => {
props.setSheetVisible(!props.sheetVisible)
props.setItemsVisible(true) }
}
fullScreen = { props.sheetTitle === 'room detail' ? true : false } >
<div style = {
{ backgroundColor: props.sheetTitle === "profile" ? "transparent" : " " } } >
</div>
{
props.sheetTitle === "new room " ? (
<NewRoom
cardDetail = {props.cardDetail}
setSheetVisible = { (item)=> {
props.setSheetVisible(item)
props.setItemsVisible(true)
}}
/>) :
props.sheetTitle === "start room" ? (
<StartRoom
setSheetCreateRoom = { props.setSheetCreateRoom }
setSheetVisible = { (item)=>
{
props.setSheetVisible(item);
props.setItemsVisible(true);
}
}
/>
) :(
" "
)
}
</SwipeableBottomSheet>
</>
)
}