vasansr / pro-mern-stack

Code Listing for the book Pro MERN Stack
http://www.apress.com/in/book/9781484226520
343 stars 159 forks source link

Typo in "Communicating from Child to Parent" #34

Open antonioOrtiz opened 7 years ago

antonioOrtiz commented 7 years ago

In this section you are explaining how a child component would get access to a parents methods.

The way to communicate from the child to a parent is by passing callbacks from the parent to the child, which it can call to achieve specific tasks. In this case, you pass createIssue as a callback property from IssueTable to IssueAdd. From the child, you just call the passed in function in your handler to create a new issue.

You meant IssueList (parent) to IssueAdd(child) ?

I would think just by examining the return JSX from IssueList...

render() {
    return (
      <div>
        <h1>Issue Tracker</h1>
        <IssueFilter />
        <hr />
        <IssueTable issues={this.state.issues} />
        <hr />
        <IssueAdd createIssue={this.createIssue} />
      </div>
    );
  }

We could see IssueTable is sibling to IssueAdd, no?

The createIssue prop (I like to think of them as attributes :) ), <IssueAdd createIssue={this.createIssue} />

is being defined in the handleSubmit function.

  handleSubmit(e) {
    e.preventDefault();
    var form = document.forms.issueAdd;
    console.log('form', document.forms);
    this.props.createIssue({ . // <-- this bad boy being defined right here
      owner: form.owner.value,
      title: form.title.value,
      status: 'New',
      created: new Date()
    });

So to sum it up we are passing the function defined in IssueList so we can use it in IssueAdd right?