Problem with Notes

manager.jsx

import React from "react";
import {
  Form,
  FormGroup,
  Label,
  TabContent,
  TabPane,
  ButtonGroup,
  Table,
  Nav,
  NavItem,
  NavLink,
  Input,
  FormText,
  Card,
  CardText,
  CardBody,
  CardHeader,
  CardTitle,
  CardFooter,
  Row,
  Col
} from "reactstrap";
import { createNote } from "functions/index";
import { Button } from "components";
// used for making the prop types of this component

const INITIAL_STATE = {
  noteArr: [],
  noteVal: "",
  commentVal: "",
  hTabs: 0,
  needUpdate: false
};

const byPropKey = (propertyName, value) => () => ({
  [propertyName]: value
});

class NoteManager extends React.Component {
  constructor(props) {
    super(props);
    this.state = { ...INITIAL_STATE };
    this.createNotes = this.createNotes.bind(this);
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (this.state.needUpdate) {
      this.createNotes();
    }
  }

  componentDidMount() {
    this.createNotes();
  }

  createNotes = () => {
    createNote.getNotes(this.props.accountID, this.props.typeNotes, noteArr => {
      this.setState({ noteArr });
      console.log(noteArr);
    });
  };

  render() {
    const { noteArr, noteVal, commentVal, hTabs, needUpdate } = this.state;
    return (
      <React.Fragment>
        <Col lg={6} md={8} xs={12} className="ml-auto mr-auto">
          <Card>
            <CardHeader>Add Note</CardHeader>
            <CardBody>
              <Col xs={12} sm={12}>
                <Row>
                  <Col xs={12} md={12}>
                    <FormGroup>
                      <Input
                        type="textarea"
                        value={this.state.noteVal}
                        onChange={event =>
                          this.setState(
                            byPropKey("noteVal", event.target.value)
                          )
                        }
                        placeholder="Anything you want to add?"
                      />
                    </FormGroup>
                  </Col>
                </Row>
              </Col>
            </CardBody>
            <CardFooter>
              <Button onClick={this.makeNote.bind(this)} color="info" round>
                Add
              </Button>
            </CardFooter>
          </Card>
        </Col>

        <Col lg={6} md={8} xs={12} className="ml-auto mr-auto">
          <Card>
            <CardHeader>
              <CardTitle>
                Notes - <small className="description">{noteArr.length}</small>
              </CardTitle>
            </CardHeader>
            <CardBody>
              <Nav pills className="nav-pills-primary">
                {noteArr.map((prop, key) => {
                  return (
                    <NavItem key={key}>
                      <NavLink
                        className={this.state.hTabs === key ? "active" : ""}
                        onClick={() => this.setState({ hTabs: key })}
                      >
                        {prop.title}
                      </NavLink>
                    </NavItem>
                  );
                })}
              </Nav>
              <TabContent activeTab={this.state.hTabs} className="tab-space">
                {noteArr.map((prop, key) => {
                  return (
                    <TabPane key={key} tabId={key}>
                      <p className="blockquote blockquote-primary">
                        {prop.data}
                      </p>
                      {prop.comments.map((propCom, keyCom) => {
                        return <p key={keyCom}> - {propCom.comments}</p>;
                      })}
                      <FormGroup>
                        <Input
                          type="text"
                          value={this.state.commentVal}
                          onChange={event => {
                            this.setState(
                              byPropKey("commentVal", event.target.value)
                            );
                            this.setState({
                              noteId: prop.id
                            });
                          }}
                          placeholder="Comments?"
                        />
                      </FormGroup>
                      <Button
                        onClick={this.makeComment.bind(this)}
                        color="info"
                        round
                      >
                        Add
                      </Button>
                    </TabPane>
                  );
                })}
              </TabContent>
            </CardBody>
          </Card>
        </Col>
      </React.Fragment>
    );
  }

  makeNote = () => {
    createNote.makeNote(
      this.props.accountID,
      this.props.typeNotes,
      this.state.noteVal,
      dataArr => {
        this.setState({ noteVal: "", needUpdate: true });
      }
    );
  };

  makeComment = () => {
    createNote.makeComment(
      this.props.accountID,
      this.state.noteId,
      this.props.typeNotes,
      this.state.commentVal,
      dataArr => {
        this.setState({ commentVal: "", needUpdate: true });
      }
    );
  };
}

export default NoteManager;

ParentComponent.jsx

This is how I have it nested, this code is not stand alone
<NoteManager
  accountID={this.props.match.params.id}
  typeNotes="accounts"
/>