I am using Material UI Drawer for sidebar and passing the setReplyDrawer to child ReplyReview so that I can close it from the child with a click event but getting error that setReplyDrawer is not a function.
replyDrawer state is used for opening and close a modal.

<Button onClick={()=>setReplyDrawer(false)}>Back</Button>

can anyone please let me know what am i doing wrong or how to correct it?

import { Avatar, Box, Button, Container, CssBaseline, Divider, Rating, Select, Stack, SwipeableDrawer } from '@mui/material'
import React, { useState } from 'react'
import { AiFillCaretDown } from "react-icons/ai";
import MouseOverPopover from '../common/MouseOverPopover';
import SelectOptions from '../common/SelectOptions';
import ReplyReview from './ReplyReview';
import { BsChat } from "react-icons/bs";

const ReviewList = ({name,comment,createTime,reply,star}) => {
  const [action, setAction] = useState('')
  const [showMore, setShowMore] = useState(false)
  const [replyDrawer, setReplyDrawer] = useState(false)


  return (
    <div className='review-list-container'>
      
      {/* some code here*/}
      <div className='review-buttons'>
          
          {/* Reply Button */}
          <MouseOverPopover 
                mainContent={
                <Button size='medium' onClick={()=>setReplyDrawer(true)} variant="outlined">
                    <BsChat style={{fontSize:'27px'}} />
                </Button>} 
                popoverContent={`Add Tyson Hinton as a contact to start messaging`} 
          />          
          <div>
            
            <SwipeableDrawer
              sx={{
                width: drawerWidth,
                zIndex: (theme) => theme.zIndex.drawer   1,
                flexShrink: 0,
                '& .MuiDrawer-paper': {
                  width: drawerWidth,
                  boxSizing: 'border-box',
                },
                padding:'20px'
              }}
              anchor={'right'}
              open={replyDrawer}
              onClose={()=>setReplyDrawer(false)}
              onOpen={()=>setReplyDrawer(true)}
            >
              <ReplyReview name={name} replyDrawer={replyDrawer}      setReplyDrawer={setReplyDrawer} />
            </SwipeableDrawer>
          </div>
      </div>      
     
           
    </div>
  )
}

export default ReviewList

ReplyReview.jsx

import { Button, Drawer, IconButton, InputBase, Paper, SwipeableDrawer } from '@mui/material'
import React, { useState } from 'react'
import { BsSearch } from "react-icons/bs";
import { AiOutlinePlusCircle } from "react-icons/ai";
import { BiArrowBack } from "react-icons/bi";
import './ReplyReview.css'


const ReplyReview = (name,replyDrawer,setReplyDrawer,first,setFirst) => {
    const [buttonClicked, setButtonClicked] = useState(false)
    const drawerWidth = 500;
    console.log(replyDrawer,setReplyDrawer)

  return (
    <div className='reply-review-container'>
       <header>
            <Button onClick={()=>setReplyDrawer(false)}><BiArrowBack/></Button>
           <strong>Start messaging {name.name}</strong> 
       </header>            
          
    </div>
  )
}

export default ReplyReview

In ReplyReview the button is used to close the modal

CodePudding user response：

You forgot to deconstruct the props

const ReplyReview = (name,replyDrawer,setReplyDrawer,first,setFirst) => {

to

const ReplyReview = ({name,replyDrawer,setReplyDrawer,first,setFirst}) => {

"name.name" should now be just "name"

CodePudding user response：

Maybe you don't call that function in the Correct way

function ReplayReview(props){

// here props an object so you need to pull up any value from that object

return   <Button onClick={()=>props.setReplyDrawer(false)}>Back</Button>
}

                         or 

function ReplayReview({setReplayDrawer})=>{

//You can use object destructure in square bracket into function arguments. For  Example: const obj={a:5,b:10}
//  const {a,b}=obj or const a=obj.a ,const b=obj.b

  return <Button onClick={()=>setReplayDrawer(false)}>back</Button>
}