Cómo usar correctamente un bucle dentro de JSX en React

¡Hola a todos! Acabo de empezar a aprender React y me encontré con un problema: necesito mostrar una lista de elementos en la página usando JSX. Tengo un array de datos, por ejemplo, una lista de tareas: ```javascript const tasks = ['Comprar leche', 'Hacer ejercicio', 'Escribir código']; ``` Quiero mostrar cada tarea como un `

` individual dentro de un `

`. Intenté escribirlo así: ```javascript function TaskList() { return (
{for (let i = 0; i < tasks.length; i++) {
• {tasks[i]}
}}
); } ``` Pero React muestra un error: "SyntaxError: Unexpected token". He leído que JSX es solo azúcar sintáctico para `React.createElement`, pero no entiendo por qué el bucle no funciona. En JavaScript normal, escribiría un bucle y dentro de él crearía elementos, pero aquí todo se rompe. Por favor, indíquenme cómo organizar correctamente un bucle dentro de JSX. ¿Necesito usar algún método especial? ¿Y por qué mi código no funciona? Gracias de antemano por la ayuda.