so i'm trying to get the history object from the props in the component i'm working on and it always prints an error this is the class i'm trying to use history object in it
import React from 'react';
const Admin = (props) => {
return (
<React.Fragment>
<h1>Admin</h1>
<button
onClick={()=>this.props.history.push("/edit/new")}
type="button" className="btn btn-primary btn-lg m-1">
Add
</button>
<table className="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{props.prod.map(prod1 =>(
<tr key ={prod1.id}>
<td>{prod1.name}</td>
<td>{prod1.price}</td>
<td>
<i
onClick={()=>this.props.history.push(`/edit/${prod1.id}`)
}
className="fas fa-edit"></i>
</td>
<td>
<span onClick={()=>props.delete(prod1)}>
<i className ="fas fa-trash m-2" ></i>
</span>
</td>
</tr>
))}
</tbody>
</table>
</React.Fragment>
);
}
export default Admin;
and the app.jsx i called it in route like this
<Route path="/admin" element = {<Admin
prod = {this.state.Product}
delete={this.deleteEntery}
editing = {this.editElement}
/>}/>
You have not imported useHistory hook and declared history using it.
Add this to import:
import { useHistory } from 'react-router-dom'
call useHistory history inside your function using variable history:
const history = useHistory()
If you have any import error, then use latest React version as well as install 'react-router-dom' v5.2.0 by using this command: npm install 'react-router-dom@v5.2.0'
First thing you are not passing 'history' as a prop to Admin component, if you wanted to use history object in your component you would simply need to import it and use it (No need to pass it as prop).
// Import it at the top of your file
import { useHistory } from 'react-router-dom'
// Call this hook inside your functional component, history variable has all the required properties
const history = useHistory()