TypeError: Cannot read property 'push' of undefined with this.props.history.push

Question

I'm following a course to update an item with React using Axios. I'm following the steps but I meet a problem with a function. When I click on the update button, it should redirect me to a page with the item form prepopulated but I got an error: TypeError: Cannot read property 'push' of undefined

See my code bellow with the handleUpdate function where the problem come from:

export default class ListBooks extends React.Component {
    constructor(props) {
        super(props);
        this.state = { error: null, data: [], number: "", name: "" }
    }
    componentDidMount() {
        Axios.get(process.env.REACT_APP_API_PATH_BOOKS)
            .then(res => {
                this.setState({ data: res.data });
            })
            .catch(errorThrown => {
                this.setState({ error: errorThrown });
            })
    }

    /**
    * Use to delete a book by the number.
    */
    handleDelete = (index) => {
        const id = this.state.data[index].name
        Axios.delete(process.env.REACT_APP_API_PATH_BOOKS + id)
            .then(res => {
                console.log(res);
                console.log(res.data);
                this.setState(prevState => ({ ...prevState, data: prevState.data.filter((book) => book.name !== id) }))
            })
            .catch(errorThrown => {
                this.setState({ error: errorThrown });
            })
    }

    handleUpdate = event => {
        event.preventDefault();
        this.props.history.push(`/admin/${this.state.number}/edit`);
        console.log(this.props);
    }

    render() {
        const { data } = this.state;


        return (
            <div>

                <Container>

                    {data.map((books, index) =>
                        <div key={books.number}>
                            <ListGroup>
                                <ListGroup.Item disabled id={"book-admin" + data[index].number}>{books.number}. {books.name} {books.author}
                                </ListGroup.Item>
                            </ListGroup>
                            <Button variant="outline-warning" size="sm" className="btn-admin-change" onClick={this.handleUpdate}>Modifier</Button>
                            <Button variant="outline-danger" size="sm" className="btn-admin-change" onClick={() => this.handleDelete(index)}>Supprimer</Button>

                        </div>
                    )}
                </Container>

            </div>
        )
    }
}

I have never used this.props.history that way before and I don't really understand how it should work. Does anyone can explain me the problem here?

Answer 1

If you are using React-router Dom library for Routing below steps would help..

• import "withRouter" Hoc here

ie import { withRouter } from "react-router";

and wrap your component with withRouter(component_name);

Plz refer this link https://reactrouter.com/web/api/withRouter

looks like history props is missing so with above changes this should work