react-quill custom save button to firebase

Question

Okay, so I am trying to build a react based notes application that saves to firebase. I'm using react-quill as my text editor and currently, I am having trouble sending the data of the editor off to firebase when I click a custom save icon that I inserted to the toolbar. I've been messing around with this all day and now I feel like I'm just ripping my hair out trying to make this work. If anyone can look over this component and help me figure this out I would really appreciate it.

import React, { Component } from 'react'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import fire from '../../firebase'
import * as Icon from 'react-feather'

const CustomButton = () => <Icon.Save onClick={NoteEditor.modules.toolbar.handlers.writeUserNotes} />

const CustomToolbar = () => (
  <div id='toolbar'>
    <select className='ql-header' defaultValue={''} onChange={e => e.persist()}>
      <option value='1' />
      <option value='2' />
      <option selected />
    </select>
    <button className='ql-bold' />
    <button className='ql-italic' />
    <select className='ql-color'>
      <option value='red' />
      <option value='green' />
      <option value='blue' />
      <option value='orange' />
      <option value='violet' />
      <option value='#d0d1d2' />
      <option selected />
    </select>
    <button className='ql-save'>
      <CustomButton />
    </button>
  </div>
)

export default class NoteEditor extends Component {
  constructor (props) {
    super(props)
    this.state = { text: '' }
    this.handleChange = this.handleChange.bind(this)
  }

  writeUserNotes (user) {

  }

  handleChange (value) {
    this.setState({ text: value })
  }

  render () {
    return (
      <div className='text-editor w-80'>
        <CustomToolbar />
        <ReactQuill
          onChange={this.handleChange}
          modules={NoteEditor.modules}
          formats={NoteEditor.formats}
          theme={'snow'}
        />
      </div>
    )
  }
}

NoteEditor.modules = {
  toolbar: {
    container: '#toolbar',
    handlers: {
      writeUserNotes: () => {
        fire.database().ref('/notes').set({
          note: 
        })
      }
    }
  },
  clipboard: {
    matchVisual: false
  }
}

NoteEditor.formats = [
  'header',
  'font',
  'size',
  'bold',
  'italic',
  'underline',
  'strike',
  'blockquote',
  'list',
  'bullet',
  'indent',
  'link',
  'image',
  'color'
]

Answer 1

The way I would handle that is by using a wrapper, something like:

class App extends React.Component {
  state = {
    notes: '',
  }

  handleChange = (notes) => { 
     this.setState({ notes }) 
  }

  handleClick = () => { 
    fire.database().ref('/notes').set({
      note: this.state.notes
    })
  }

  render () {
    return (
      <div>
        <CustomToolbar onClick={this.handleClick} />
        <NoteEditor onChange={this.handleChange} />
      </div>
    )
  }
}