M
M
Mikhail Rerberg2019-01-29 16:16:28
React
Mikhail Rerberg, 2019-01-29 16:16:28

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);
  };
}

Child component:
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

2 answer(s)
0
0xD34F, 2019-01-29
@NooNoo

onNoteAdd = {this.handleNoteAdd.bind(this)}
<...>
this.props.onNodeAdd(newNote)

So how is it correct - Note or Node? You'll figure it out.

P
ParaBellum577, 2019-01-29
@ParaBellum577

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 question

Ask a Question

731 491 924 answers to any question