Firebase.push failed: first argument contains an invalid key($$typeof)
<p>I am learning react native for the first time for developing android app not IOS one and I was learning from <strong>Building a Simple ToDo App With React Native and Firebase</strong> tutorial from youtube.But I am getting an error while trying to add items. I get following error</p>
<p><strong>Firebase.push failed: first argument contains an invalid key($$typeof) in property 'restaurant.restaurant_name.targetInst._nativeParent._currentElement'.keys must be non-empty strings and cant contain &quot;.&quot;,&quot;#&quot;,&quot;$&quot;,&quot;/&quot;,&quot;[&quot;</strong></p>
<p>What might be creating this issue?</p>
<pre><code>import React, { Component } from 'react';

import Firebase from 'firebase';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  TextInput,
  ListView
} from 'react-native';

class foodOrderSystem extends Component {
  constructor(props){
    super(props);
    const firebaseRef = new Firebase('foodordersystem.firebaseio.com');
    console.log(firebaseRef);
    this.itemRef = firebaseRef.child('restaurant');
    this.state = {
        newRestaurant:'',
        // estimated_delivery:'',
        // description:'',
        restaurantSource: new ListView.DataSource({rowHasChanged: (row1,row2) =&gt; row1 !== row2})
    };
    this.restaurant = [ ];
  }

  componentDidMount() {
    this.itemRef.on('child_added', (snap) =&gt; {
        this.restaurant.push({
            id:snap.key(),
            text:snap.val()
        });
        this.setState({
            restaurantSource:this.state.restaurantSource.cloneWithRows(this.restaurant)
        });
    });

    this.itemRef.on('child_removed', (snap) =&gt; {
        this.restaurant = this.restaurant.filter((x) =&gt; x.id !== snap.key());
        this.setState({
            restaurantSource:this.state.restaurantSource.cloneWithRows(this.restaurant)
        });
    });

  }

  addRestaurant(){
    if(this.state.newRestaurant !== ''){
        this.itemRef.push({
            restaurant_name: this.state.newRestaurant
        });
        this.setState({ newRestaurant:''});
    }
  }

  removeRestaurant(rowData){
    this.itemRef.child(rowData.id).remove();
  }

  render() {
    return (
      &lt;View style={styles.appContainer}&gt;
        &lt;View style={styles.titleView}&gt;
            &lt;Text style={styles.titleText}&gt;
              foodOrderSystem
            &lt;/Text&gt;
        &lt;/View&gt;
        &lt;View style={styles.inputcontainer}&gt;
            &lt;TextInput 
                style={styles.input} 
                onChange={(text) =&gt; this.setState({newRestaurant:text})}
                value={this.state.newRestaurant} /&gt;
                &lt;TouchableHighlight
                    style={styles.button}
                    onPress={ () =&gt; this.addRestaurant() }
                    underlayColor=&quot;#00ffff&quot;&gt;
                    &lt;Text style={styles.btnText}&gt;Add&lt;/Text&gt;
                &lt;/TouchableHighlight&gt;
        &lt;/View&gt;
        &lt;ListView
            dataSource={this.state.restaurantSource}
            renderRow={this.renderRow.bind(this)} /&gt;
      &lt;/View&gt;
    );
  }

  renderRow(rowData){
    return(
        &lt;TouchableHighlight
            underlayColor=&quot;#dddddd&quot;
            onPress={() =&gt; this.removeRestaurant(rowData)}&gt;
            &lt;View&gt;
                &lt;View style={styles.row}&gt;
                    &lt;Text style={styles.todoText}&gt;{rowData.text}&lt;/Text&gt;
                &lt;/View&gt;
                &lt;View style={styles.separator} /&gt;
            &lt;/View&gt;
        &lt;/TouchableHighlight&gt;
    );
}
}

const styles = StyleSheet.create({
  appContainer:{
    flex: 1
  },
  titleView:{
    backgroundColor: '#48afdb',
    paddingTop: 30,
    paddingBottom: 10,
    flexDirection: 'row'
  },
  titleText:{
    color: '#fff',
    textAlign: 'center',
    fontWeight: 'bold',
    flex: 1,
    fontSize: 20,
  },
  inputcontainer: {
    marginTop: 5,
    padding: 10,
    flexDirection: 'row'
  },
  button: {
    height: 36,
    flex: 2,
    flexDirection: 'row',
    backgroundColor: '#48afdb',
    justifyContent: 'center',
    color: '#FFFFFF',
    borderRadius: 4,
  },
  btnText: {
    fontSize: 18,
    color: '#fff',
    marginTop: 6,
  },
  input: {
    height: 36,
    padding: 4,
    marginRight: 5,
    flex: 4,
    fontSize: 18,
    borderWidth: 1,
    borderColor: '#48afdb',
    borderRadius: 4,
    color: '#48BBEC'
  },
  row: {
    flexDirection: 'row',
    padding: 12,
    height: 44
  },
  separator: {
    height: 1,
    backgroundColor: '#CCCCCC',
  },
  todoText: {
    flex: 1,
  },
});

AppRegistry.registerComponent('foodOrderSystem', () =&gt; foodOrderSystem);
</code></pre>
<p>Here is the attachment of error</p>
<p><a href="https://i.stack.imgur.com/6bLcc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6bLcc.png" alt="enter image description here" /></a></p>