Renderizado iterativo con bucles

Este reto consiste en desarrollar una aplicación que renderice una lista de productos utilizando bucles y el método map(). El objetivo es familiarizarse con el renderizado iterativo en React.

En este reto, se solicita crear un componente denominado Producto que será responsable de mostrar el nombre y el precio de cada producto. Luego, en el componente principal de la aplicación, se definirá una lista de productos, cada uno con un nombre y un precio. Utilizando el método map(), se deberá iterar sobre esta lista y renderizar un componente Producto para cada elemento de la lista. Un aspecto crucial es asegurarse de que cada componente Producto renderizado tenga una propiedad key única para facilitar el seguimiento de los elementos en la interfaz de usuario.

Este reto es ideal para desarrollar habilidades en el manejo de arrays y la generación dinámica de componentes en React. aprenderás a utilizar el método map() para iterar sobre listas y a aplicar mejores prácticas en la gestión de propiedades y funciones de renderizado. Además, comprenderás la importancia de las claves únicas (key) en el renderizado de listas para optimizar la eficiencia y evitar problemas en la actualización de la interfaz de usuario.

Instrucciones:

1. Define un componente Producto que reciba las propiedades nombre y precio y las muestre en un elemento div.
2. En el componente principal de la aplicación, define una lista de productos, cada uno con un nombre y un precio.
3. Utiliza el método map() para iterar sobre la lista de productos y renderizar un componente Producto para cada uno.
4. Asegúrate de utilizar una propiedad key única para cada componente Producto renderizado.

Ejemplo de lista de productos:

const productos = [
  { id: 1, nombre: 'Producto A', precio: 30 },
  { id: 2, nombre: 'Producto B', precio: 20 },
  { id: 3, nombre: 'Producto C', precio: 50 }
];

Salida esperada:

La aplicación debe mostrar una lista de productos con su nombre y precio en la interfaz de usuario.