renderStateComponents() {
        let toRender = [];
        console.log("[Customize.js] renderStateComponents()]");

        for (let i = 0; i < this.props.comp.length; i++) {
            if (this.props.comp[i].type === "Header") {
                toRender.push(
                    <div>
                        <Header
                            key={i}
                            uniqueId={this.props.comp[i].id}
                            // FIXME: TypeError: Cannot read property 'webCopy' of undefined
                            // customText={this.props.copy[i].webCopy}
                        ></Header>
                        <input
                            key={this.props.comp.length + i}
                            associate={this.props.comp[i].id}
                            onChange={e =>
                                this.props.addCopy(
                                    e.target.value,
                                    this.props.comp[i].id
                                )
                            }
                        ></input>
                    </div>
                );
                if (this.props.copy.length === 0) {
                    // assigns a unique ID to each piece of copy entered into database
                    this.props.getNewStateVariable(this.props.comp[i].id);
                }
            } else if (this.props.comp[i].type === "Headline") {
                toRender.push(
                    <div>
                        <Headline
                            key={i}
                            uniqueId={this.props.comp[i].id}
                            moveUp={() =>
                                this.moveUp([
                                    this.props.comp[i].type,
                                    this.props.comp[i].id
                                ])
                            }
                            moveDown={() =>
                                this.moveDown([
                                    this.props.comp[i].type,
                                    this.props.comp[i].id
                                ])
                            }
                            del={() =>
                                this.deleteComponent([
                                    this.props.comp[i].type,
                                    this.props.comp[i].id
                                ])
                            }
                        ></Headline>
                        <input
                            key={this.props.comp.length + i}
                            associate={this.props.comp[i].id}
                        ></input>
                    </div>
                );
                if (this.props.copy.length === 0) {
                    this.props.getNewStateVariable(this.props.comp[i].id);
                }
            } else if (this.props.comp[i].type === "Text Area") {
                toRender.push(
                    <div>
                        <TextArea
                            key={i}
                            uniqueId={this.props.comp[i].id}
                            moveUp={() =>
                                this.moveUp([
                                    this.props.comp[i].type,
                                    this.props.comp[i].id
                                ])
                            }
                            moveDown={() =>
                                this.moveDown([
                                    this.props.comp[i].type,
                                    this.props.comp[i].id
                                ])
                            }
                            del={() =>
                                this.deleteComponent([
                                    this.props.comp[i].type,
                                    this.props.comp[i].id
                                ])
                            }
                        ></TextArea>
                        <input
                            key={this.props.comp.length + i}
                            associate={this.props.comp[i].id}
                        ></input>
                    </div>
                );
                if (this.props.copy.length === 0) {
                    this.props.getNewStateVariable(this.props.comp[i].id);
                }
            } else if (this.props.comp[i].type === "Image") {
                toRender.push(
                    <div>
                        <Image
                            key={i}
                            uniqueId={this.props.comp[i].id}
                            moveUp={() =>
                                this.moveUp([
                                    this.props.comp[i].type,
                                    this.props.comp[i].id
                                ])
                            }
                            moveDown={() =>
                                this.moveDown([
                                    this.props.comp[i].type,
                                    this.props.comp[i].id
                                ])
                            }
                            del={() =>
                                this.deleteComponent([
                                    this.props.comp[i].type,
                                    this.props.comp[i].id
                                ])
                            }
                        ></Image>
                        <input
                            key={this.props.comp.length + i}
                            associate={this.props.comp[i].id}
                        ></input>
                    </div>
                );
                if (this.props.copy.length === 0) {
                    this.props.getNewStateVariable(this.props.comp[i].id);
                }
            } else if (this.props.comp[i].type === "Email Field") {
                toRender.push(
                    <div>
                        <EmailField
                            key={i}
                            uniqueId={this.props.comp[i].id}
                            moveUp={() =>
                                this.moveUp([
                                    this.props.comp[i].type,
                                    this.props.comp[i].id
                                ])
                            }
                            moveDown={() =>
                                this.moveDown([
                                    this.props.comp[i].type,
                                    this.props.comp[i].id
                                ])
                            }
                            del={() =>
                                this.deleteComponent([
                                    this.props.comp[i].type,
                                    this.props.comp[i].id
                                ])
                            }
                        ></EmailField>
                        <input
                            key={this.props.comp.length + i}
                            associate={this.props.comp[i].id}
                        ></input>
                    </div>
                );
                if (this.props.copy.length === 0) {
                    this.props.getNewStateVariable(this.props.comp[i].id);
                }
            } else if (this.props.comp[i].type === "Footer") {
                toRender.push(
                    <div>
                        <Footer
                            key={i}
                            uniqueId={this.props.comp[i].id}
                            moveUp={() =>
                                this.moveUp([
                                    this.props.comp[i].type,
                                    this.props.comp[i].id
                                ])
                            }
                            moveDown={() =>
                                this.moveDown([
                                    this.props.comp[i].type,
                                    this.props.comp[i].id
                                ])
                            }
                            del={() =>
                                this.deleteComponent([
                                    this.props.comp[i].type,
                                    this.props.comp[i].id
                                ])
                            }
                        ></Footer>
                        <input
                            key={this.props.comp.length + i}
                            associate={this.props.comp[i].id}
                        ></input>
                    </div>
                );
                if (this.props.copy.length === 0) {
                    this.props.getNewStateVariable(this.props.comp[i].id);
                }
            }
        }

        return toRender;
    }