React – Fixing ‘Truffle React Box onChange Error: Cannot Read Property ‘SetState’ of Undefined’

reacttruffle-box

these are the functions that fail:
Error:
Uncaught TypeError: Cannot read property 'setState' of undefined
at createOrgSchoolAddress (App.js:187)

when I pasted the address in (third function was called)

createOrgShortNameChange(event){
    this.setState({createCredentialOrgShortName: event.target.value});
}
createOrgOfficialNameChange(event){
    this.setState({createCredentialOrgOfficialSchoolName: event.target.value});
}
createOrgSchoolAddress(event){
    this.setState({createCredentialOrgSchoolAddress: event.target.value});
}

GitHug Link

<table>
<tbody>
    <tr><td>School Short Name</td><td><input type="text" maxLength="30" size="32" value={this.state.createCredentialOrgShortName} onChange={this.createOrgShortNameChange} /></td></tr>  
    <tr><td>School Official Name</td><td><input type="text" maxLength="70" size="72" value={this.state.createCredentialOrgOfficialSchoolName} onChange={this.createOrgOfficialNameChange} /></td></tr>  
    <tr><td>School Address</td><td><input type="text" maxLength="42"  size="50" value={this.state.createCredentialOrgSchoolAddress} onChange={this.createOrgSchoolAddress} /></td></tr>  
    </tbody>
</table>

I expect it's something simple, but am stuck at the moment.

Best Answer

per: https://stackoverflow.com/questions/32317154/react-uncaught-typeerror-cannot-read-property-setstate-of-undefined

it suggested i add the binds at the top (which didn't work), but putting them in place worked well.

<tr><td>School Short Name</td><td><input type="text" maxLength="30"  size="32" value={this.state.createCredentialOrgShortName} onChange={this.createOrgShortNameChange.bind(this)} /></td></tr>  
<tr><td>School Official Name</td><td><input type="text" maxLength="70"  size="72" value={this.state.createCredentialOrgOfficialSchoolName} onChange={this.createOrgOfficialNameChange.bind(this)} /></td></tr>  
<tr><td>School Address</td><td><input type="text" maxLength="42"  size="50" value={this.state.createCredentialOrgSchoolAddress} onChange={this.createOrgSchoolAddress.bind(this)} /></td></tr>