Why is the parent method called by itself?

Question

React

Good afternoon, dear ones. I don't understand what's going on.
There is a parent component:

var inputData = {
    images: [
        'images/first-variant.png',
        'images/second-variant.png'
    ]
}

//.....

export default class Parent extends Component {

    constructor(props) {
        super(props);

        this.state = {
            page: 0,
            inputData: undefined,
            outputData: {
                variant: 0
            }
        }
    }

    getInputData() {
        // Показать, что тут будет вызов AJAX
        setTimeout(() => {
            this.setState({inputData: inputData, page: 1});
        }, 1000);
    }

    goNext(outputData) {
        let page = this.state.page;
        let obj = Object.assign({}, this.state.outputData, outputData);
        this.setState({page: ++page, outputData: obj});
    }

    componentDidMount() {
        this.getInputData();
    }

    render() {
        console.log(this.state.outputData);
        switch (this.state.page) {
            case 0:
                return (<p></p>);
            case 1:
                return (<FirstPage
                    data={this.state.inputData.images}
                    goNext={this.goNext.bind(this)} />
                );
            case 2:
                return (<div>Second page</div>);
        }
    }

}

And there is a child component:

export default class FirstPage extends Component {

    constructor(props) {
        super(props);
    }

    goNext(obj) {
        this.props.goNext(obj);
    }
    
    render() {
        let variants = this.props.data.map((item, index) => {
            let returnedObject = {
                variant: index
            }
            return (<img className="sample-img" onClick={this.goNext(returnedObject)} key={index} src={item} />);
        });
        return (<div>
            <h1>Choose variant</h1>
            {variants}
        </div>);
    }
}

So when I run the application, the console immediately gives me

Object
variant: 0
__proto__: Object

and after a second the error:

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

and object:

Object
variant: 1
__proto__: Object

Why is the method called by itself? Sorry, maybe a noob question, but I can't figure it out.
Thanks in advance for your replies.

Answer 1

You need to pass a handler function to onClick , and you pass the handler function () === the result of your function ...
That is, as soon as the button is on the page, the call immediately occurs (parentheses).
Example:

function myFunc(data) { console.log(data) }
console.log( myFunc('test') ) => выведеть в консоль 'test'
console.log( myFunc ) => выведеть в консоль function myFunc ...

PS Naturally, the question immediately arises - how to pass a function + argument ... You need either a bind method or an anonymous function ... There are pros and cons to different approaches, but I still like to use data attributes for this .. then when passing a handler function, I have everything I need in event.target.dataset.
PPS When such questions arise, then you need to go and dig the basics, since in the future the misunderstanding between functions, arguments, property fields in props'ax and so on will only increase more... Start by theory, I recommend from here: https:// learn.javascript.ru/function-basics , then: https://learn.javascript.ru/introduction-browser-events