Cacher is the code snippet organizer for pro developers

import * as React from "react";
import { setFirstName } from "./actions";
import InputField from "../../components/InputField";
import connect from "../../path to our connect function";

const Container1 = ({ getFirstName, getLastName, dispatchFistName }) => {
    return (
        <article>
            <p>
                <strong>
                    {getFirstName} {getLastName}
                </strong>
            </p>
            <InputField
                label={"Set first name"}
                value={getFirstName}
                handleOnChange={value => dispatchFistName(value)}
            />
        </article>
    );
};

/**
 * A factory function that connects to the state given by the provider
 *
 * @param {object} state The state found in the provider
 * @returns object
 */
const mapStateToProps = state => {
    return {
        getFirstName: state.container1.firstName,
        getLastName: state.container2.lastName
    };
};

/**
 * A factory function of methods that dispatches actions to the provider
 *
 * @param {function} dispatch Main dispatch function that updates the provider
 */
const mapDispatchToProps = dispatch => {
    return {
        dispatchFistName: firstName => dispatch(setFirstName(firstName))
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Container1);