"TableData.js:57 DELETE https://clientdata-dd35a-default-rtdb.firebaseio.com/userDataRecord.json/:${id} net::ERR_FAILED TableData.DeleteData @ TableData.js:57 onClick @ TableData.js:152 TableData.js:57 Uncaught (in promise) TypeError: Failed to fetch"

I get this error on my delete button code.Delete button code cant identify the id of tabledatas. I am trying it but didn't get output. Please help me to solve this issue. I share my code.

tabledata.js file

const db = StartFirebase();
export class TableData extends Component {
constructor() {
    super();
    this.state = {
        tableDatas: []
    }
}
componentDidMount() {
    const dbRef = ref(db, 'userDatas')
    onValue(dbRef, (snapshot) => {
        let records = []
        snapshot.forEach(childSnapshot => {
            let keyName = childSnapshot.key;
            let data = childSnapshot.val()
            records.push({ "key": keyName, "data": data })
        })
        this.setState({ tableDatas: records })
    })
}
DeleteData=async(id)=>{
await fetch('https://clientdata-dc88a-default-rtdb.firebaseio.com/userDatas.json/:${id}',{
   method:'DELETE'
 }).then((res)=>{
 res.json().then((resp)=>{
       alert('delete', id)
   })
})
}
render() {
    return (
        <div>
<table className="table table-bordered table table-hover" id="table-to-xls">
                <thead>
                    <tr>
                        <th scope="col">ID</th>
                        <th scope="col">Sr</th>
                        <th scope="col">House No</th>
                        <th scope="col">Name</th>
                        <th scope="col">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        this.state.tableData.map((row, id) => {
                            return (
                                <tr key={id}>
                                    <th scope="row">{id}</th>
                                    <td>{row.data.userDatas.srno}</td>
                                    <td>{row.data.userDatas.house}</td>
                                    <td>{row.data.userDatas.nameMarathi}</td>
                                    <td>{row.data.userData.name}</td>
                                    <td>{<button onClick={()=>this.DeleteData(id)}>Delete</button>}</td>
                                 </tr>
                            )
                        })
                    }
             </tbody>
            </table>
        </div>
    )
}
}

CodePudding user response：

This URL is wrong:

https://clientdata-dc88a-default-rtdb.firebaseio.com/userDatas.json/:${id}

When accessing the Firebase Realtime Database's REST API, the .json extension always needs to be at the end of the URL.

So:

https://clientdata-dc88a-default-rtdb.firebaseio.com/userDatas/:${id}.json