title: React does not recognize the `toggleNode` prop on a DOM element
body: <p>I am getting the following warnings which I assume prevent my app from loading its full functionality.</p>
  
  <p><strong>Warning</strong>: <em>React does not recognize the <code>toggleNode</code> prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase <code>togglenode</code> instead. If you accidentally passed it from a parent component, remove it from the DOM element.</em></p>
  
  <p><strong>Warning</strong>: <em>Received <code>false</code> for a non-boolean attribute <code>focused</code>.
  If you want to write it to the DOM, pass a string instead: focused="false" or focused={value.toString()}.
  If you used to conditionally omit it with focused={condition &amp;&amp; value}, pass focused={condition ? value : undefined} instead.</em></p>
  
  <p><strong>Console Output</strong></p>
  
  <pre><code>Warning: React does not recognize the `toggleNode` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `togglenode` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
      in div (created by ForwardRef)
      in ForwardRef (created by ListGroupItem)
      in ListGroupItem (created by Bootstrap(ListGroupItem))
      in Bootstrap(ListGroupItem) (at MyTreeMenu.js:22)
      in ListItem (at MyTreeMenu.js:53)
      in div (created by AbstractNav)
      in AbstractNav (created by Context.Consumer)
      in ContextTransform(AbstractNav) (created by ListGroup)
      in ListGroup (created by Bootstrap(ListGroup))
      in Bootstrap(ListGroup) (created by Uncontrolled(Bootstrap(ListGroup)))
      in Uncontrolled(Bootstrap(ListGroup)) (created by ForwardRef)
      in ForwardRef (at MyTreeMenu.js:51)
      in div (created by c)
      in c (created by t)
      in t (at MyTreeMenu.js:41)
      in MyTreeMenu (at MyCanvas.js:270)
      in div (at MyCanvas.js:269)
      in div (created by Col)
      in Col (at MyCanvas.js:268)
      in div (created by Row)
      in Row (created by Bootstrap(Row))
      in Bootstrap(Row) (at MyCanvas.js:267)
      in MediaQuery (at MyCanvas.js:266)
      in div (created by Container)
      in Container (at MyCanvas.js:264)
      in div (at MyCanvas.js:262)
      in MyCanvas (created by Context.Consumer)
      in Route (at App.js:10)
      in Router (created by BrowserRouter)
      in BrowserRouter (at App.js:9)
      in App (at src/index.js:15)
  
  Warning: Received `false` for a non-boolean attribute `focused`.
  
  If you want to write it to the DOM, pass a string instead: focused="false" or focused={value.toString()}.
  
  If you used to conditionally omit it with focused={condition &amp;&amp; value}, pass focused={condition ? value : undefined} instead.
      in div (created by ForwardRef)
      in ForwardRef (created by ListGroupItem)
      in ListGroupItem (created by Bootstrap(ListGroupItem))
      in Bootstrap(ListGroupItem) (at MyTreeMenu.js:22)
      in ListItem (at MyTreeMenu.js:53)
      in div (created by AbstractNav)
      in AbstractNav (created by Context.Consumer)
      in ContextTransform(AbstractNav) (created by ListGroup)
      in ListGroup (created by Bootstrap(ListGroup))
      in Bootstrap(ListGroup) (created by Uncontrolled(Bootstrap(ListGroup)))
      in Uncontrolled(Bootstrap(ListGroup)) (created by ForwardRef)
      in ForwardRef (at MyTreeMenu.js:51)
      in div (created by c)
      in c (created by t)
      in t (at MyTreeMenu.js:41)
      in MyTreeMenu (at MyCanvas.js:270)
      in div (at MyCanvas.js:269)
      in div (created by Col)
      in Col (at MyCanvas.js:268)
      in div (created by Row)
      in Row (created by Bootstrap(Row))
      in Bootstrap(Row) (at MyCanvas.js:267)
      in MediaQuery (at MyCanvas.js:266)
      in div (created by Container)
      in Container (at MyCanvas.js:264)
      in div (at MyCanvas.js:262)
      in MyCanvas (created by Context.Consumer)
      in Route (at App.js:10)
      in Router (created by BrowserRouter)
      in BrowserRouter (at App.js:9)
      in App (at src/index.js:15)
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React from 'react'
  import './App.css'
  import MyCanvas from './components/MyCanvas'
  import { BrowserRouter, Route } from 'react-router-dom'
  
  class App extends React.Component {
  
    render () {
      return &lt;BrowserRouter&gt;
        &lt;Route exact path="/en/design/configurator" component={MyCanvas}/&gt;
        &lt;Route path="/en/design/configurator/fabric/:id" component={MyCanvas}/&gt;
      &lt;/BrowserRouter&gt;
    }
  }
  
  export default App
  
  </code></pre>
  
  <p><strong>MyCanvas.js</strong></p>
  
  <pre><code> &lt;Col xs={3}&gt;
       &lt;div style={{ height: '768px', display: 'block', overflowY: 'scroll' }}&gt;
            &lt;MyTreeMenu data={this.state.menu} processSelection={this.processSelection.bind(this)}/&gt;
       &lt;/div&gt;
  &lt;/Col&gt;
  
  </code></pre>
  
  <p><strong>MyTreeMenu.js</strong></p>
  
  <pre><code>import React from 'react'
  import TreeMenu from 'react-simple-tree-menu'
  import Form from 'react-bootstrap/Form'
  import ListGroup from 'react-bootstrap/ListGroup'
  import ListGroupItem from 'react-bootstrap/ListGroupItem'
  
  const DEFAULT_PADDING = 16
  const ICON_SIZE = 8
  const LEVEL_SPACE = 16
  
  const ToggleIcon = ({ on }) =&gt; &lt;span style={{ marginRight: 8 }}&gt;{on ? '-' : '+'}&lt;/span&gt;
  
  const ListItem = ({
                      level = 0,
                      hasNodes,
                      isOpen,
                      label,
                      searchTerm,
                      openNodes,
                      ...props
                    }) =&gt; (
    &lt;ListGroupItem
      {...props}
      style={{ paddingLeft: DEFAULT_PADDING + ICON_SIZE + level * LEVEL_SPACE, cursor: 'pointer', }}&gt;
      {hasNodes &amp;&amp; &lt;ToggleIcon on={isOpen}/&gt;}
      &lt;img src={props.url} width={32} height={32} alt={label}/&gt;
      &amp;nbsp;
      {label}
    &lt;/ListGroupItem&gt;
  )
  
  class MyTreeMenu extends React.Component {
  
    constructor (props){
      super(props)
      this.processSelection = this.props.processSelection.bind(this)
    }
  
    render () {
      return (
        &lt;TreeMenu data={this.props.data}
                  debounceTime={125}
                  onClickItem={({ key, label, ...props }) =&gt; {this.processSelection(props.modifier, props.slug)}}&gt;
          {({ search, items }) =&gt; (
            &lt;&gt;
              &lt;Form&gt;
                &lt;Form.Group controlId="formSearch"&gt;
                  &lt;Form.Control onChange={e =&gt; search(e.target.value)} placeholder="Type and search"/&gt;
                &lt;/Form.Group&gt;
              &lt;/Form&gt;
              &lt;ListGroup&gt;
                {
                  items.map(props =&gt; (&lt;ListItem {...props} /&gt;))
                }
              &lt;/ListGroup&gt;
            &lt;/&gt;
          )}
        &lt;/TreeMenu&gt;
      )
    }
  }
  
  export default MyTreeMenu
  </code></pre>