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...
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?
In this section you are explaining how a child component would get access to a parents methods.
You meant
IssueList
(parent) toIssueAdd
(child) ?I would think just by examining the return
JSX
fromIssueList
...We could see
IssueTable
is sibling toIssueAdd
, no?The
createIssue
prop (I like to think of them as attributes :) ),<IssueAdd createIssue={this.createIssue} />
is being defined in the handleSubmit function.
So to sum it up we are passing the function defined in
IssueList
so we can use it inIssueAdd
right?