Answer the question
In order to leave comments, you need to log in
How to use the function passed to props?
Hello!
Gives an error: _this.props.onNodeAdd is not a function.
Where is the mistake?
Parent component:
export default class App extends Component {
render() {
return(
<div className="app">
<h2 className="app__header">Notes</h2>
<NoteEditor onNoteAdd = {this.handleNoteAdd.bind(this)}/>
<NotesGrid />
</div>
)
}
handleNoteAdd = (data) => {
console.log('I need this --->', data);
};
}
export default class NoteEditor extends Component {
state = {
title: '',
text: '',
color: '#ffffff'
};
render() {
return (
<div className='note-editor'>
<input
type='text'
className='note-editor__title'
placeholder='Enter title'
value = {this.state.title}
onChange = {this.handleTitleChange}
/>
<textarea
placeholder='Enter note text'
rows = {5}
className='note-editor__text'
value = {this.state.text}
onChange = {this.handleTextChange}
/>
<div className='note-editor__footer'>
{/*<ColorPicker*/}
{/*value={this.state.color}*/}
{/*onChange={this.handleColorChange}*/}
{/*/>*/}
<button
className='note-editor__button'
disabled = {!this.state.text}
onClick = {this.handleNoteAdd}
>
Add
</button>
</div>
</div>
)
}
handleTitleChange = (evt) => {
this.setState({
title: evt.target.value
});
};
handleTextChange = (evt) => {
this.setState({
text: evt.target.value
});
};
handleNoteAdd = () => {
const newNote = {
title: this.state.title,
text: this.state.text,
color: this.state.color
};
this.props.onNodeAdd(newNote);
// console.log('---', newNote);
this.setState({
title: '',
text: '',
color: '#ffffff'
});
}
}
Answer the question
In order to leave comments, you need to log in
onNoteAdd = {this.handleNoteAdd.bind(this)}
<...>
this.props.onNodeAdd(newNote)
onNoteAdd = {this.handleNoteAdd.bind(this)}/>
this.props. onNodeAdd (newNote);
Read carefully and you will understand
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question