title: Warning: Each child in a list should have a unique "key" prop.%s%s
body: <p>Hello to the whole community.</p>
  
  <p>I am doing a project in which the restaurants in my city can place their dishes and generate orders through the Application.</p>
  
  <p>But I am having an error with my project when executing it.</p>
  
  <p>This is the mistake I am having.</p>
  
  <pre><code>Warning: Each child in a list should have a unique "key" prop.%s%s  
  Check the render method of `VirtualizedList`., , 
      in CellRenderer (at VirtualizedList.js:767)
      in VirtualizedList (at FlatList.js:676)
      in FlatList (at Meals.tsx:14)
      in RCTView (at Meals.tsx:12)
      in Meals (at SceneView.js:9)
      in SceneView (at StackViewLayout.tsx:900)
      in RCTView (at createAnimatedComponent.js:151)
      in AnimatedComponent (at StackViewCard.tsx:106)
      in RCTView (at createAnimatedComponent.js:151)
      in AnimatedComponent (at screens.native.js:100)
      in Screen (at StackViewCard.tsx:93)
      in Card (at createPointerEventsContainer.tsx:95)
      in Container (at StackViewLayout.tsx:975)
      in RCTView (at screens.native.js:131)
      in ScreenContainer (at StackViewLayout.tsx:384)
      in RCTView (at createAnimatedComponent.js:151)
      in AnimatedComponent (at StackViewLayout.tsx:374)
      in PanGestureHandler (at StackViewLayout.tsx:367)
      in StackViewLayout (at withOrientation.js:30)
      in withOrientation (at StackView.tsx:104)
      in RCTView (at Transitioner.tsx:267)
      in Transitioner (at StackView.tsx:41)
      in StackView (at createNavigator.js:80)
      in Navigator (at createKeyboardAwareNavigator.js:12)
      in KeyboardAwareNavigator (at SceneView.js:9)
      in SceneView (at StackViewLayout.tsx:900)
      in RCTView (at createAnimatedComponent.js:151)
      in AnimatedComponent (at StackViewCard.tsx:106)
      in RCTView (at createAnimatedComponent.js:151)
      in AnimatedComponent (at screens.native.js:100)
      in Screen (at StackViewCard.tsx:93)
      in Card (at createPointerEventsContainer.tsx:95)
      in Container (at StackViewLayout.tsx:975)
      in RCTView (at screens.native.js:131)
      in ScreenContainer (at StackViewLayout.tsx:384)
      in RCTView (at createAnimatedComponent.js:151)
      in AnimatedComponent (at StackViewLayout.tsx:374)
      in PanGestureHandler (at StackViewLayout.tsx:367)
      in StackViewLayout (at withOrientation.js:30)
      in withOrientation (at StackView.tsx:104)
      in RCTView (at Transitioner.tsx:267)
      in Transitioner (at StackView.tsx:41)
      in StackView (at createNavigator.js:80)
      in Navigator (at createKeyboardAwareNavigator.js:12)
      in KeyboardAwareNavigator (at createAppContainer.js:430)
      in NavigationContainer (at withExpoRoot.js:26)
      in RootErrorBoundary (at withExpoRoot.js:25)
      in ExpoRoot (at renderApplication.js:40)
      in RCTView (at AppContainer.js:101)
      in DevAppContainer (at AppContainer.js:115)
      in RCTView (at AppContainer.js:119)
      in AppContainer (at renderApplication.js:39)
  </code></pre>
  
  <p>I am doing the project on my frontend with React-native.</p>
  
  <p>**My code is this - my frontend **</p>
  
  <p><strong><em>App.js</em></strong></p>
  
  <pre><code>import { createAppContainer } from 'react-navigation';
  import { createStackNavigator } from 'react-navigation-stack';
  import MealsScreen from './src/screens/Meals';
  import Modal from './src/screens/Modal';
  
  const AppNavigation = createStackNavigator({
    Meals: {
      screen: MealsScreen
    }
  }, {
    initialRouteName: 'Meals'
  });
  
  const RootStack = createStackNavigator( {
    Main: AppNavigation,
    Modal: Modal,
  }, {
    mode: 'modal',
    headerMode: 'none',
  });
  
  export default createAppContainer( RootStack );
  </code></pre>
  
  <p><strong><em>Meals</em></strong></p>
  
  <pre><code>import React from 'react';
  import { Text, View, StyleSheet, FlatList } from 'react-native';
  import ListItem from '../components/ListItem';
  import UseFetch from '../hooks/useFetch';
  
  const Meals = ({navigation}) =&gt; {
      const { loading, data: meals } = UseFetch('https://serverless.mgyavega.now.sh/api/meals');
  
      return(
          &lt;View style =  { styles.container }&gt;
              { loading ? &lt;Text style =  { styles.text }&gt;Cargando por favor espere...&lt;/Text&gt; :
                  &lt;FlatList
                      style = { styles.list }
                      data = { meals }
                      keyExtractor= { x =&gt; x.id }
                      renderItem = {({ item }) =&gt;
                          &lt;ListItem
                              onPress={ () =&gt; navigation.navigate('Modal', { id: item.id })}
                              name = { item.name }
                          /&gt;
                      }
                  /&gt;
              }
          &lt;/View&gt;
      )
  }
  
  Meals.navigationOptions = ({
      title: 'Comidas Disponibles',
  });
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          backgroundColor: '#fff',
          alignItems: 'flex-start',
          justifyContent: 'flex-start'
      },
      list: {
          alignSelf: 'stretch'
      },
      text: {
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center'
      }
  });
  
  export default Meals;
  </code></pre>
  
  <p>Create a list that calls the Flatlist action and manage the information on my list.</p>
  
  <p><strong><em>List.js</em></strong></p>
  
  <pre><code>import React from 'react';
  import {  TouchableOpacity, Text, StyleSheet } from 'react-native';
  
  export default ({ name, onPress }) =&gt; {
      return (
          &lt;TouchableOpacity onPress = { onPress } style={ styles.container }&gt;
              &lt;Text style = { styles.text }&gt; {name} &lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
      )
  }
  
  const styles = StyleSheet.create({
      container: {
          paddingHorizontal: 15,
          height: 60,
          justifyContent: 'center',
          borderBottomWidth: 1,
          borderBottomColor: '#eee'
      },
      text: {
          fontSize: 16
      }
  });
  </code></pre>
  
  <p>Get the url of my project.</p>
  
  <p><strong><em>UseFecth.js</em></strong></p>
  
  <pre><code>import { useEffect, useState } from 'react';
  
  const UseFetch = ( url ) =&gt; {
      const [loading, setLoading] = useState(true);
  
      const [ data, setData] = useState([]);
  
      const fetchData = async () =&gt; {
  
          const response = await fetch(url);
  
          const data  = await response.json();
  
          setData(data);
  
          setLoading(false);
      };
  
      useEffect(() =&gt; {
          fetchData();
      }, [] );
  
      return { loading, data }
  }
  
  export default UseFetch;
  </code></pre>
  
  <p><strong><em>My modal.js</em></strong></p>
  
  <pre><code>import React from 'react';
  import {  View, Text, } from 'react-native';
  import UseFetch from '../hooks/useFetch';
  
  export default ({navigation}) =&gt; {
  
      const id = navigation.getParam('_id');
      const { loading, data } = UseFetch(`https://serverless.mgyavega.now.sh/api/meals/${id}`);
  
      console.log( 'Información del id del menú: ', id );
  
      return (
  
          loading ? &lt;Text&gt;Cargando &lt;/Text&gt; :
              &lt;View&gt;
                  &lt;Text&gt;  &lt;/Text&gt;
                  &lt;Text&gt;  &lt;/Text&gt;
              &lt;/View&gt;
  
      )
  }
  </code></pre>
  
  <p>I am doing my backend with MongoDB, Ziet and Node.js.</p>
  
  <p>This is my route.</p>
  
  <p><strong><em>index.js</em></strong></p>
  
  <pre><code>var express = require('express');
  var mongoose = require('mongoose');
  var bodyParser = require('body-parser');
  
  var app = express();
  app.use(bodyParser.json());
  var meals = require('./routes/meals');
  var orders = require('./routes/orders');
  
  mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true } );
  
  app.use('/api/meals', meals);
  app.use('/api/orders', orders);
  
  module.exports = app;
  </code></pre>
  
  <p><strong><em>Meals.js</em></strong></p>
  
  <pre><code>var express = require('express');
  var Meals = require('../models/meals');
  var router = express.Router();
  
  router.get('/', ( req, res ) =&gt; {
      Meals.find()
           .exec()
           .then( x =&gt; {
               res.status(200).send(x)
      });
  });
  
  router.get('/:id', ( req, res ) =&gt; {
      Meals.findById(req.params.id)
           .exec()
           .then( x =&gt; {
               res.status(200).send(x);
      });
  });
  </code></pre>
  
  <p><strong><em>Models.js</em></strong></p>
  
  <pre><code>var mongoose = require('mongoose');
  var Schema = mongoose.Schema;
  
  const Meal = mongoose.model('Meal', new Schema({
      name: String,
      desc: String,
  }));
  
  module.exports = Meal;
  </code></pre>
  
  <p>I don't know why the information is duplicating me.</p>
  
  <p>I appreciate the collaboration you can give me.</p>
  
  <p>Thank you.</p>
  
  <p>Mario</p>