I am mapping `button` from array:

```
render() {
        var replyList = questions.map(reply => {
            return (
                reply.r.map(singleReply => {
                    return (
                        <div>
                            <button
                                key={singleReply.id}
                                value={singleReply.b}
                                goto={singleReply.t}
                                onClick={this.onButtonClick}>
                                {singleReply.b}
                            </button>
                         </div>
                    );
                })
            );
        });

```

After `onClick` is called method:

```
onButtonClick = (evt) => {
        const btn = evt.target;
        this.setState(
            {
                currentDialog: btn.goto
            }
        );
        console.log(`The user clicked ${btn.value}`);
        console.log(`New state will be ${btn.goto}`);
    };

```

And I am receiving in console:

```
The user clicked reply1-2 App.js:25
New state will be undefined

```

My array looks like:

```
{
        id: uuid.v4(),
        q: 'dialog1',
        r: [
            { b: 'reply1-1', t: 1, id: uuid.v4() },
            { b: 'reply1-2', t: 2, id: uuid.v4() },
            { b: 'reply1-3', t: 3, id: uuid.v4() },
            { b: 'reply1-4', t: 4, id: uuid.v4() }
        ]
    },
(...)

```

As you can see, the problem is, that `value` property is rendered properly, but `goto` property is not receiving number from the array, and I have no idea why.