React - cannot read property 'props' of undefined

Witam, co może być nie tak w tym projekcie, że podczas kliknięcia na button "Następny krok" pojawia mi się błąd w konsoli "Cannot read property 'props' of undefined". Dlaczego propsy są niezdefiniowane?

Poniżej wklejam kod komponentu:

AddObjectForm.js:

import React, { Component } from "react";
import { connect } from 'react-redux';
import { formActions } from '../actions/formActions.js';

class AddObjectForm extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(
        <div>
                <h1>Form component</h1>
                <h1>{this.props.currentStep}</h1>
                <button onClick={this.handleClick}>Następny krok</button>
        </div>
        )
    }

    handleClick() {
        this.props.stepOver();
    }
}

const mapStateToProps = (state) => {
    return {
        currentStep: state.currentStep,
        objectName: state.objectName
    }
}

const mapDispatchToProps = { formActions };

export default connect(mapStateToProps, mapDispatchToProps)(AddObjectForm);

app.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store/configureStore.js'
import AddObjectForm from './components/AddObjectForm.js'

const App = () => (
    <div>
        <h1>Hello World</h1>
        <AddObjectForm></AddObjectForm>
    </div>
)

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root'));

Popraw na:

onClick={() => this.handleClick()}

Na onClick przekazujesz "referencje do funkcji" która zostanie wywołana z innym this, pewnie będzie to event kliknięcia a nie Twój komponent, a event kliknięcia nie ma właściwości this.props. Możesz też zrobić tak:

onClick={this.handleClick.bind(this)}

Więcej o tym poczytasz tutaj: https://reactjs.org/docs/handling-events.html

Dzięki wielkie. Może żeby nie zakładać tematu na kolejną pierdołę, to dopytam tutaj :)
Czy z kodu zamieszczonego w pierwszym poście można wywnioskować, dlaczego wartości ze store nie są mapowane do propsów?
Chodzi mi o to że state ma odpowiednie wartości dla poszczególnych propertisów (sprawdzałem), a przy odwołaniu do props, wszystkie propertisy (oprócz stepOver()) są undefined. Jeśli potrzebne są w celu znalezienia problemu jakieś dodatkowe dane/konfiguracje, to zamieszczę

ZielonySzczypior napisał(a):

Dzięki wielkie. Może żeby nie zakładać tematu na kolejną pierdołę, to dopytam tutaj :)
Czy z kodu zamieszczonego w pierwszym poście można wywnioskować, dlaczego wartości ze store nie są mapowane do propsów?
Chodzi mi o to że state ma odpowiednie wartości dla poszczególnych propertisów (sprawdzałem), a przy odwołaniu do props, wszystkie propertisy (oprócz stepOver()) są undefined. Jeśli potrzebne są w celu znalezienia problemu jakieś dodatkowe dane/konfiguracje, to zamieszczę

Brakuje kawałka formActions.js. Obstawiam, że state zostaje wypełniony jakoś później, ale i tak jeśli wszystko jest dobrze ustawione to powinien przerenderować komponent.

To jest plik formActions.js

export const stepOver = () => {
    return dispatch =>
        dispatch({
            type: 'FORM_STEP_OVER'
        });
};

W pliku AddObjectForm.js w linijce 3 i 32 jest mały błąd, niestety nie mogę już edytować. Powinno oczywiście być

import { stepOver} from '../actions/formActions.js';