how can i access the history in my react components from props?

user_17571874 0
Viewed 198

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}
                        />}/>
reactjs javascript
2 Answers

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'

user_176322510

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()
user_61385600
Related