How to make 'this' refer to App, not modal - reactjs

Question

In my EditRecipeForm component, when editing text in the modal, I get Uncaught TypeError: this.setState is not a function , because this refers to the modal window, and not the "app", the thing I don't understand is how to get this to be correct, so that editing the field value updates actually works.
(I removed code not directly related), full demo available here: http://codepen.io/pdewouters/pen/adLpvQ
const Button = ReactBootstrap.Button,
Accordion = ReactBootstrap.Accordion,
Panel = ReactBootstrap.Panel,
Modal = ReactBootstrap.Modal,
Input = ReactBootstrap.Input,
ButtonToolbar = ReactBootstrap.ButtonToolbar,
ButtonInput = ReactBootstrap.ButtonInput,
ListGroup = ReactBootstrap.ListGroup,
ListGroupItem = ReactBootstrap.ListGroupItem
class App extends React.Component {
constructor(props){
super(props)
this.state = {
showModal: false,
showEditModal: false,
recipes: [],
recipeName: '',
ingredients: '',
editRecipeNameInputVal: '',
editIngredientsInputVal: '',
recipeToEdit: {recipeName:'',ingredients:''}
}
}
closeEditModal(){
this.setState({ showEditModal: false })
}
openEditModal(recipe){
this.setState({showEditModal:true,recipeToEdit:recipe})
}
handleRecipeEditInputChange(value){
this.setState({editRecipeNameInputVal: value})
}
handleIngredientsEditInputChange(value){
this.setState({editIngredientsNameInputVal: value})
}
render(){
return(
<div className="container">
<div className="page-header">
<h1>Recipes</h1>
</div>
<div className="row">
<div className="col-md-12">
<EditRecipeForm
showModal={this.state.showEditModal}
closeModal={this.closeEditModal.bind(this)}
handleSubmit={this.handleEditFormSubmit.bind(this)}
handleRecipeEditInputChange={this.handleRecipeEditInputChange.bind(this)}
handleIngredientsEditInputChange={this.handleIngredientsEditInputChange.bind(this)}
recipe={this.state.recipeToEdit}
handleRecipeEditInputChange={this.handleRecipeEditInputChange}
handleIngredientsEditInputChange={this.handleIngredientsEditInputChange} />
<RecipeList recipes={this.state.recipes}
handleDeleteRecipe={this.handleDeleteRecipe.bind(this)}
handleOpenEditModal={this.openEditModal.bind(this)}
/>
</div>
</div>
</div>
)
}
}
class RecipeList extends React.Component {
handleOpenEditModal(recipe,event) {
this.props.handleOpenEditModal(recipe)
}
render(){
let recipes = this.props.recipes.map((recipe,index)=>{
return (
<Panel header={recipe.recipeName} eventKey={index}>
<IngredientsList ingredients={recipe.ingredients} />
<ButtonToolbar>
<Button bsStyle="danger" onClick={this.props.handleDeleteRecipe.bind(null,index)}>Delete</Button>
<Button bsStyle="primary" onClick={this.handleOpenEditModal.bind(this,recipe)}>Edit</Button>
</ButtonToolbar>
</Panel>
)
})
return (
<Accordion>
{recipes}
</Accordion>
)
}
}
class EditRecipeForm extends React.Component {
handleRecipeEditInputChange(e){
this.props.handleRecipeEditInputChange(e.target.value)
}
handleIngredientsEditInputChange(e){
this.props.handleIngredientsEditInputChange(e.target.value)
}
render(){
return(
<Modal show={this.props.showModal} onHide={this.props.closeModal}>
<Modal.Header closeButton>
<Modal.Title>Edit recipe</Modal.Title>
</Modal.Header>
<Modal.Body>
<form onSubmit={this.props.handleSubmit}>
<Input type="text"
label="Recipe"
placeholder="blueberry pancakes"
value={this.props.recipe.recipeName}
onChange={this.handleRecipeEditInputChange.bind(this)} />
<Input type="textarea"
label="Ingredients"
placeholder="milk,sugar,flour,butter,blueberries"
value={this.props.recipe.ingredients}
onChange={this.handleIngredientsEditInputChange.bind(this)} />
<ButtonInput type="submit" value="Save changes" />
</form>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.props.closeModal}>Close</Button>
</Modal.Footer>
</Modal>
)
}
}
React.render(<App />, document.querySelector('.app'))

Answer 1

It looks like you're passing the handleRecipeEditInputChange and handleIngredientsEditInputChange prop callbacks twice and the second time you are not binding to the component instance.
<EditRecipeForm
showModal={this.state.showEditModal}
closeModal={this.closeEditModal.bind(this)}
handleSubmit={this.handleEditFormSubmit.bind(this)}
handleRecipeEditInputChange={this.handleRecipeEditInputChange.bind(this)}
handleIngredientsEditInputChange={this.handleIngredientsEditInputChange.bind(this)}
recipe={this.state.recipeToEdit}
handleRecipeEditInputChange={this.handleRecipeEditInputChange}
handleIngredientsEditInputChange={this.handleIngredientsEditInputChange} />
The second props will overwrite the first ones, so try deleting the second ones.