I tried it from last 2 days but can not getting the solution. I tried many times please help me out.If any one knows please help me thanks in advance
Trying to fetch the details of room while clicking on Book Now button but Getting **error:src\screen\Bookingscreen.js Line 21:8:
React Hook useEffect has a missing dependency: 'match.params.roomid'. Either include it or remove the dependency array**
Here is my code :

```
````Bookingscreen.js

import React, { useState, useEffect } from 'react'
    import axios from "axios"
    function Bookingscreen({ match }) {
        const [loading, setloading] = useState(true);
        const [error, setError] = useState();
        const [room, setroom] = useState();
        useEffect(() => {
            async function postData() {
                try {
                    setloading(true);
                    const data = (await axios.post('/api/rooms/getroombyid', { roomid: match.params.roomid })).data; // Here I got the Error
                    setroom(data);
                    setloading(false);
                } catch (error) {

                    console.log(error)
                    setloading(false);
                    setError(true);
                }
            }; postData();
        }, []);

        return (

            <div className='m-5'>
                {loading ? (<h1>loading...</h1>) : error ? (<h1>Error...</h1>) : (<div>

                    <div className='row justif-content-center mt-5 bs'>

                        <div className='col-md-6'>
                            <h1>{room.name}</h1>
                            <img src={room.imageurls[0]} className='bigimg' />
                        </div>

                        <div style={{ float: "right" }}>
                            <div className='col-md-6'>
                                <b>
                                    <h1>Bookin Details</h1>
                                    <hr />
                                    <p>Name:</p>
                                    <p>From Date :</p>
                                    <p>To Date :</p>
                                    <p>Max Count : {room.maxcount}</p>
                                </b>
                            </div>

                            <div style={{ float: "right" }}>
                                <b>
                                    <h1>Amount</h1>
                                    <hr />
                                    <p>Total days: </p>
                                    <p>Rent per day: {room.rentperday}</p>
                                    <p>Total Amount</p>
                                </b>
                            </div>
                            <div style={{ float: "right" }}>
                                <button className='btn btn-primary'>Pay Now</button>
                            </div>
                        </div>

                    </div>

                </div>)}
            </div>

        )
    }

    export default Bookingscreen;

````App.js file:

From App.js I used the Route for fetch roomid:

import logo from './logo.svg';
import './App.css';
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import HomeScreen from './screen/HomeScreen';
import Bookingscreen from './screen/Bookingscreen';
function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
        <Routes>
          <Route exact path="/" element={<HomeScreen />} />
          <Route path="/book/:roomid" element={<Bookingscreen />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

````Room.js file:

import React, { useState } from 'react'
        import { Modal, Button, Carousel } from 'react-bootstrap'
        import { Link } from 'react-router-dom'
        function Room({ room }) {
          const [show, setShow] = useState(false);
          const handleClose = () => setShow(false);
          const handleShow = () => setShow(true);
          return (

            <div className='row bs'>
              <div className='col-md-4'>
                <img src={room.imageurls[0]} alt='' className='smallimg' />
              </div>
              <div className='col-md-7'>
                <h1>{room.name}</h1>
                <b>
                  {" "}
                  <p>Max Count: {room.maxcount}</p>
                  <p>Phone Number: {room.phonenumber}</p>
                  <p>Type: {room.type}</p>
                </b>
                <div style={{ float: 'right' }}>
                  <Link to={`/book/${room._id}`}>
                    <button className='btn btn-primary m-2'>Book Now</button>
                  </Link>
                  <button className='btn btn-primary' onClick={handleShow}>View Details</button>
                </div>
              </div>

              <Modal show={show} onHide={handleClose} size='lg'>
                <Modal.Header>
                  <Modal.Title>{room.name}</Modal.Title>
                </Modal.Header>
                <Modal.Body>

                  <Carousel>
                    {room.imageurls.map(url => {
                      return <Carousel.Item>
                        <img
                          className="d-block w-100 bigimg"
                          src={url}
                          alt="room-images"
                        />
                      </Carousel.Item>
                    })}

                  </Carousel>
                  {room.description}
                </Modal.Body>
                <Modal.Footer>
                  <Button variant="secondary" onClick={handleClose}>
                    Close
                  </Button>
                </Modal.Footer>
              </Modal>

            </div>
          )
        }

        export default Room

````roomsRoute.js file:

const express=require('express');
    const router=express.Router();
    const Room=require("../models/roomModel");

    //book a room
    router.post("/getroombyid", async(req,res)=>{
        try {
            const room=await Room.findOne({_id:req.params.roomid})
            res.send("Successful");
        } catch (error) {
            return res.status(400).json({message:"error"});
        }

    });

    module.exports=router;

```