I'm trying to render a component HomeScreen.js for dynamically generated div's. I'm able to get this somewhat working, but I'm not able to get the component separated from the dynamically generated div, furthermore I'm only trying to render HomeScreen.js for only the div that is clicked, but the functionality I have currently opens HomeScreen.js for All divs.

(This is a contact app, the dynamically generated divs are contacts. I'm just trying to show contact information for each contact that gets clicked)

I've attached screenshots of the current functionality and of the functionality I'm trying to get

[![Current Functionality](https://i.stack.imgur.com/yznF7.png)](https://i.stack.imgur.com/yznF7.png)

[![Desired Functionality](https://i.stack.imgur.com/ZwaRe.png)](https://i.stack.imgur.com/ZwaRe.png)

I could use some insight.

```
import store from '../libs/store.js';
var jsforce = require('jsforce');

class menuScreen extends React.Component {

    constructor(props) {
        super(props)

        const data = store.getState();

        this.state = {

            username: '',
            messages: data.messages,
            records: [],
            showModal: false,
            showChat: false

        }
    }

    handleSearch(e) {
        this.setState({
            username: e.target.value
        })
    }

    handleChange(evt) {
        this.setState({
            username: evt.target.value.substr(0, 100)
        });

    }

    onClick(e) {
        e.preventDefault();
        this.setState({
            showChat: !this.state.showChat
        })
    }

    onLinkClicked() {

        var conn = new jsforce.Connection({
            serverUrl: 'https://cs63.salesforce.com',
            accessToken: sessionStorage.getItem('token')
        })

        var parent = this.state.username
        //console.log(this.state.username)
        conn.sobject("Contact").find({
                LastName: {
                    $like: parent
                }
            }, 'Id, Name, Phone, Account.Name'

        ).sort('-CreatedDate Name').
        limit(5).skip(10).execute(function(err, records) {
            if (err) {
                return console.error(err);
            }
            for (var i = 0; i < records.length; i++) {
                var record = (records[i]);
                console.log("Name: " + record.Name); 
                console.log("Phone: " + record.Phone);
                console.log("Account Name: " + record.Account.Name);

            }
            this.setState({
                records: records
            })

            this.setState({
                showChat: !this.state.showChat
            })

        }.bind(this))

    }

    render() {
        return (
            <div className='menubox' id='menubox'>

                <div className="boxbox">
                    <input className="search" type="text" placeholder="Contact Last Name" onChange={this.handleChange.bind(this)} value={this.state.username} />
                    <input className="submit" type="submit" onClick={this.onLinkClicked.bind(this)} value="GO" /></div>
                <div>
                    <div>
                        {this.state.records.map(record => (
                            <div className="info-block block-info clearfix">
                                <div className="square-box pull-left">
                                    <span className="glyphicon glyphicon-user glyphicon-lg"></span>
                                </div>
                                <h5>{record.Name}</h5>
                                <h4>{record.Phone}</h4>
                                <p>{record.Account.Name}</p>

                                    **//Trying to render home.js when Chat Bubble is clicked.**

                                    <a onClick={this.onClick.bind(this)}>
                                    <img src="./img/speechbubble.png" className="textIcon" />
                                     {this.state.showChat && < HomeScreen / >}
                                </a>
                            </div>
                        ))}
                    </div>

                </div>
            </div>

        )
    }

}

export default menuScreen;

```