react 配列の展開について

今reactの配列を展開しようとしています。

react.js
1  for (var i = 0; i < messagesData.length; i++) {
2            // for (var i = 0; i < messagesData.length; i++) {
3
4                messagesDataNew.push(
5                    <Card>
6                        <Card.Content>
7                            <Image floated='right' size='mini' src='/images/avatar/large/steve.jpg'/>
8                            <Card.Meta> {messagesData[i]["author"]}</Card.Meta>
9                            <Card.Description>
10                                {messagesData[i]["message"]}
11                            </Card.Description>
12                        </Card.Content>
13                 
14                        <Card.Content extra>
15                            <div className='ui two buttons'>
16                                <Modal trigger={
17                                    <Button basic color='green'>
18                                       取得
19                                    </Button>
20
21                                }>
22                                    <Modal.Header>取得したい量を記入してください</Modal.Header>
23                                    <Modal.Content image>
24                                        <Form>
25                                            <Form.Field>
26                                                <label>Amount of ether</label>
27                                                <input
28                                                    // value={this.state.sendEther}
29                                                    onChange={event =>
30                                                        this.setState({ sendEther: event.target.value})}
31                                                /> ether
32
33                                            </Form.Field>
34                                        </Form>
35                                        <Button
36                                            onClick={()=> {this.sendEther(messagesData[i]["address"])}}
37                                            
38                                            style={{marginLeft:30, height: 30, marginTop:30}}
39                                            className="ui button"
40                                        >
41                                            取得する
42                                        </Button>
43                                    </Modal.Content>
44                                </Modal>
45
46                            </div>
47                        </Card.Content>
48                    </Card>
49                );
50
51
52            this.setState({messagesDataNewState: messagesDataNew});
53
54        }
55
56
57

このコードでmessagesData[i]["message"]などは取得できるのですがモーダル内のmessagesData[i]["address"]だけiが他と異なってしまい、困っています。

コードが長くて誠に申し訳ないですが、どなたか少しでもアドバイスをいただけるとありがたいです。

追記

a.js
1<Modal trigger={
2                                    <Button
3                                        onClick = {()=>{this.setState({sendAddress:messagesData[i]["address"]})}}
4                                        basic
5                                        color='green'>
6                                        投げ銭
7                                    </Button>
8
9                                }>