Move method from one component to another in React and still be able to use in original
<p>I am working to create a small contact app using React with ES6. I had some data displaying in the render function of a component - see the link to the question below for the original structure...</p>

<p><a href="https://stackoverflow.com/questions/36974318/how-to-inject-the-key-for-an-array-in-react-when-referencing-array-data-via-comp">How to specify a key for React children when mapping over an array</a></p>

<p>However, because I was also putting a form on the same page and I needed to update my data in state, I had to move the data to a higher level component. </p>

<p>Now I'm having trouble traversing the components so that my original list of contacts shows up on the left. I had to remove most of what was in my render function on the contact-list component because it was completely breaking the build.</p>

<p>First, here is the address-book component with the form - this is working, both pulling in my initial 3 contacts from state, then concating new contacts from the form to the array. (Still need cleanup code here to make UI work right...)</p>

<pre><code>import React from 'react';
import ContactList from './contact-list.jsx';
import ContactForm from './contact-form.jsx';
import ShortContact from './short-contact.jsx';

class AddressBook extends React.Component {

constructor() {
    "use strict";
    super();

    this.state = {
        showContacts: true,
        contacts: [
    {
        id: 1,
        fName: "aaa",
        lName: "aaaaa",
        imgUrl: "http://brainstorminonline.com/wp-content/uploads/2011/12/blah.jpg",
        email: "aaa@aaaa.com",
        phone: "999999999999"
    },
    {
        id: 2,
        fName: "bbbbb",
        lName: "bbbbbbb",
        imgUrl: "https://media.licdn.com/mpr/mpr/shrinknp_200_200/bbb.jpg",
        email: "bbb@bbb-bbb.com",
        phone: "888888888888"
    },
    {
        id: 3,
        fName: "Number",
        lName: "Three",
        imgUrl: "http://3.bp.blogspot.com/-iYgp2G1mD4o/TssPyGjJ4bI/AAAAAAAAGl0/UoweTTF1-3U/s1600/Number+3+Coloring+Pages+14.gif",
        email: "three@ccccc.com",
        phone: "333-333-3333"
    }
];
    };

}




render() {
    "use strict";
    return (
        &lt;div className="row address-book"&gt;

            &lt;div className="col-md-6"&gt;
                &lt;ContactList  /&gt;
            &lt;/div&gt;
            &lt;div className="col-md-6"&gt;

                &lt;button className='btn' id="contact-submit-button" type="submit" value="Create Contact"&gt;Create New Contact &lt;/button&gt;



                &lt;div&gt;
                    &lt;ContactForm  addContact={this._addContact.bind(this)}/&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    );

}

_addContact (fName, lName, company, email, phone, imgURL) {
    "use strict";
    const contact = {
        id: this.state.contacts.length + 1,
        fName,
        lName,
        company,
        email,
        phone,
        imgURL
    };
    this.setState({ contacts: this.state.contacts.concat([contact]) });
}

_getContacts() {
    "use strict";
    return contactList.map((contact) =&gt; {
        "use strict";
        return (
            &lt;ShortContact contact={contact} key={contact.id}/&gt;)
    });
}

_getContactsTitle (contactCount) {
    "use strict";
    if(contactCount === 0) {
        return 'No Contacts';
    } else if (contactCount === 1) {
        return '1 contact';
    } else {
        return `${contactCount} contacts`;
    }
}

}

export default AddressBook;
</code></pre>

<p>However, the bottom 2 methods  _getContacts and _getContactsTitle are the ones that are needed in my ContactForm component - which is this one:</p>

<pre><code>import React from 'react';
import ShortContact from './short-contact.jsx';




class ContactList extends React.Component {



render() {

    const contacts  = this._getContacts();


    return (
        &lt;div&gt;
            &lt;h3&gt;List of Contacts&lt;/h3&gt;
            &lt;h4 className="contact-count"&gt;{this._getContactsTitle((contacts.length))}&lt;/h4&gt;
            &lt;ul className="contact-list"&gt;
                {contacts}
            &lt;/ul&gt;
        &lt;/div&gt;
    );
    }
}

export default ContactList;
</code></pre>

<p>The const that defines contacts as well as the <code>&lt;h4&gt;</code> through the <code>&lt;ul&gt;</code> is what breaks the app because as you can see it references the _getContactTitle method from the other component as well as {contacts} which is in the _getContacts method.</p>

<p>I'm guessing I need to do something like wrap them into functions and pass them - but I've gotten turned around and can't quite see how that would work here with React. Any help would be welcome.  Thanks!</p>