Move Method From One Component To Another In React And Still Be Able To Use In Original

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 origi

Solution 1:

You need to pass the contacts down via props instead of trying to build the list of contacts in the parent to pass down. what I mean is this.

ADDRESS BOOK

render() {
    "use strict";
    let contacts  = this._getContacts();
-----------^---------------^----------- get the list in the parent
    return (
        <divclassName="row address-book"><divclassName="col-md-6"><ContactListcontacts={contacts} />
-------------------------------^-----------^---- important part here
            </div><divclassName="col-md-6"><buttonclassName='btn'id="contact-submit-button"type="submit"value="Create Contact">Create New Contact </button><div><ContactFormaddContact={this._addContact.bind(this)}/></div></div></div>

    );
}

then in your CONTACT LIST component just use the list as props.

render() {
    let {contacts} = this.props;
------------^--------------^---- its in the props now
    let title = contacts.length > 1 ? `${contacts.length} contacts` : contacts.length === 1 ? '1 contact' : 'No Contacts';
    return (
        <div><h3>List of Contacts</h3><h4className="contact-count">{title}</h4><ulclassName="contact-list">
                {contacts}
            </ul></div>
    );
    }
}

from here you can remove the contactTitle function. let the child render that since it knows the length of the array (because its in props).

As a side note, in your _addContact function. instead of creating a new array and concatenating it with the state contact array just push the new one onto the current state. its better storage (i.e. dont need to make a new array to combine a new item to the array).

this.setState({ contacts: this.state.contacts.push(contact) });