Salah Eddin Beriani2

هنا انت تحاول تعمل mutate لل object هذا سيسبب خطأ
window.addEventListener('scroll', (event) => { componentStyle.backgroundColor = 'black'); }); للوصول لمبتغاك حاول اتباع الشيفرة في الاسفل 
import { useEffect, useState } from 'react'; function App() { const [bg, setBg] = useState('white'); useEffect(() => { window.addEventListener('scroll', (event) => { setBg('red'); }); return () => { window.removeEventListener('scroll', (event) => { setBg('red'); }); }; }, []); return ( <div style={{ backgroundColor: bg }} > .... </div> ); } export default App;

مرحبا أخي
اول شئ يجب ان تتجنبه هو رفع env الى github في مستودع عام فهذا قد يعرضك للسرقة والاختراق .
أما بالنسبة لخطأ heroku فهذا قد يكون نتيجة اخطاء كثيرة حاول تغيير الكود هكذا 
var port = process.env.PORT || 3000; mongoose .connect(process.env.CONNECTION_STRING, { useNewUrlParser: true, useUnifiedTopology: true, dbName: "sheetCheat", }) .then(() => { console.log("Database Connection is ready..."); app.listen(port, function () { console.log(`Express is running on port ${port}`); }); }) .catch((err) => { console.log(err); }); تأكد ان المشروع يعمل على حاسوبك ثانيا لا ترفع env مع المشروع وفي heroku يمكنك اظافة متغيرات البيئة هناك عند رفع المشروع لا تنسى اظافة متغير بيئة لل port أيضا وتأكد جيداااااااا من رابط قاعدة البيانات في متغيرات البيئة وسيعمل معك المشروع دون مشاكل 

أنشئ مستودعًا جديدًا على github 
                                           
قم بتهيئة الدليل المحلي كمستودع Git.
git init -b main أضف الملفات في المستودع المحلي الجديد الخاص بك. 
git add . قم بتنفيذ الملفات التي قمت بتجميعها في مستودعك المحلي.
git commit -m "First commit" في الجزء العلوي من صفحة الإعداد السريع لمستودع GitHub ، انقر لنسخ عنوان URL للمستودع البعيد.

في Terminal ، أضف عنوان URL للمستودع البعيد حيث سيتم دفع المستودع المحلي الخاص بك.
git remote add origin <REMOTE_URL> يمكنك التحقق من اظافته بالطريقة الصحيحة 
git remote -v ادفع التغييرات في المستودع المحلي الخاص بك إلى GitHub.
git push origin main  

ما يمكن أن يسبب المشكل هو تسمية الملف بنفس اسم المكتبة مثلا pytube.py اذا كنت تسميه بهذه الطريقة فغير الاسم .
ان لم يكن ذلك ما يسبب الخطأ بالنسبة لك فقم بحذف المكتبة وثبتها مجددا  
pip uninstall pytube pip install pytube ان لم يفلح معك ذلك قم بحذف المكتبة مجددا وثبت pytube3 f بدالها
pip uninstall pytube pip install pytube3  

ال api تجريبي فقط أي أنه يحاكي مبدأ ال crud operation لكن البيانات لا تحفظ في قاعدة البيانات الخاصة بال api ويمكنك وهذا امر متفهم لأن ملايين المستخدمين يجربون الapi وقاعدة البيانات تحتوي فقط على 100 توثيق مخزنة داخلها من طرف مطوري ال api وأظن أن الكود المستعمل لديهم يمكن محاكاته
هذا مثال ال post request الذي يضعونه
fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1, }), headers: { 'Content-type': 'application/json; charset=UTF-8', }, }) .then((response) => response.json()) .then((json) => console.log(json)); فاذا كان ال api مثلا مبني ب expressjs سيقومون بشئ مشابه لهذا 
var express = require('express') var app = express() app.post('/posts', function (req, res) { //البيانات التي أرسلتها لهم const tempData = req.body //يستعملون تقنية مستخدمة للاتصال بقاعدة البيانات وجلب البوستس المخزنين const posts = getPosts() //يضيفون بياناتك الى البوستس posts.push(tempData) //ثم ترجع لك البيانات وكأنك عملت بوست ريكواست وخزنت البيانات في قاعدة اليانات res.json(posts) })  

المشكلة رائعة هنا لأنها تفرض علينا مراجعة أساس من أساسيات javascript وهو ال scops ولنسياننا أحيانا لهذا الأساس نفكر داءما في جعل متغيراتنا عامة وهذا هو أيضا اول حل أفكر فيه داءما ايضا لكن يعتبر حل ليس بجيد لذا فلنراجع أساس ال scops ونجد حل .
أول مثال يعرض علينا داءما عندما نتطرق الى موضوع ال scops هو المتغير داخل دالة و متغير خارجها هكذا
let num = 5 console.log(num)//5 function number(){ let num = 8 return num } console.log(number())//8 ولكن ال scops لا تقتصر فقط على داخل دالة أو خارجها فيمكنك حرفيا انشاء scop فقط ب {}
let num = 5 console.log(num)//5 { let num = 8 console.log(num)//8 } في حالتك يمكنك انشاء scope داخل ال case ب {}
const cartReducer = (state = initialState, action) => { switch (action.type) { case QNT_UP: { let index; //..... break; } case QNT_DOWN: { let index; //..... break; } default: return state; } };  

يمكنك استخدام خطاف useLocation الذي يوفره react-router-dom
import React from 'react'; import { useLocation } from 'react-router-dom'; function useQuery() { return new URLSearchParams(useLocation().search); } export default function App() { let query = useQuery(); const firebaseKey = query.get('__firebase_request_key'); console.log(firebaseKey); //somethingHere return <div>.....</div>; }  

في أغلب الأحيان سوف تحتاج تنظيف ال html  أو تعديله قليلا قبل حقنه لذا من المنصوح به أن تعين دالة خارجية لتتكفل بالأمر 
const injectHtml = __html => ({ __html }); const Component = ({ html }) => ( <div> <div dangerouslySetInnerHTML={injectHtml(html)} /> </div> ); اذا كان لديك محتةى في ال html مثل هذا 
&lt;em&gt;نص ما هنا:&lt;/em&gt; يمكنك معالجته باستخدام unescape من مكتبة lodash
import _ from 'lodash'; const injectHtml = html => ({ __html: _.unescape(html), }); const Component = ({ html }) => ( <div> <div dangerouslySetInnerHTML={injectHtml(html)} /> </div> );  

هناك طريقتين لتمرير الدالة لل onClick event :
الطريقة المعمول بها الان
هذه الطريقة عيبها أنها في كل حدث ضغط تقوم بانشاء دالة جديدة وهذا يسبب اعادة تشغيل للمكون غير ضرورية 
return ( <button onClick={() => this.handleClick(value)}> Content </button> ); الطريقة القديمة 
return ( <button onClick={this.handleClick.bind(this,value)}> Content </button> );  

مرحبا 
للاستفادة من البيانات بين المكونات في react يجب علينا أولا تجميعها في مكان واحد بحيث كل المكونات لديها القابلية للوصول لتلك البيانات وتوجد عدة طرق لتحقيق ذلك وأشهر طريقتين هما اما استخدام مكتبة redux أو استخدام the contect api  و لغرض الشرح المبسط سنعيد بناء هيكلة لمشروعك باستخدام context api حيث يمكنك استخدامها دون تثبيت أي مكتبات خارجية 
حسنا لنفترض أنه لديك مكون App.js
import React from 'react'; export default function App() { return ( <div> <h1>am the app component</h1> <Component1></Component1> <Component3></Component3> </div> ); } يحتوي على مكونين Component1 و Component3 
function Component2() { return ( <div style={{ marginLeft: 50 }}> <h1>---am component 2</h1> </div> ); } function Component1() { return ( <div style={{ marginLeft: 50 }}> <h1>am component 1</h1> <Component2></Component2> </div> ); } function Component3() { return ( <div style={{ marginLeft: 50 }}> <h1>am component 3</h1> </div> ); } و كما تلاحظ ال Component1 يحتوي على Component2 داخله وغرضنا في هذه الحالة الوصول الى بيانات ال Component2 من المكون Component3 والذي هو مكون خارجي في هذه الحالة نقوم بانشاء context بهذه الطريقة في ملف خارجي ولنسمه context.js
import React, { useState, createContext } from 'react'; // انشاء الكونتيكست export const Component2Context = createContext(); // انشاء موفر البيانات للمكونات للاستهلاك ومتابعة تغيير البيانات export const CounterContextProvider = (props) => { const [count, setCount] = useState(0); return ( <Component2Context.Provider value={[count, setCount]}> {props.children} </Component2Context.Provider> ); }; يمكننا الان استخدام ال context باجراء تغييؤات بسيطة في المكونات السابقة أولا لنستهلك البيانات في ال Component3
import React, { useContext } from 'react'; import { Component2Context } from './context'; //استريراد الكونتيكست function Component3() { const [count] = useContext(Component2Context); //الدخول للبانات return ( <div style={{ marginLeft: 50 }}> <h1>am component 3</h1> <p>{count}</p> //استهلاك البيانات </div> ); } ثانيا لنقوم بتغيير البيانات من المكون Component2
function Component2() { const [count, setCount] = useContext(Component2Context); const increment = () => { setCount(count + 1); }; const decrement = () => { setCount(count - 1); }; return ( <div style={{ marginLeft: 50 }}> <h1>---am component 2</h1> <button onClick={increment}>Add</button> <button onClick={decrement}>Minus</button> </div> ); } والخطوة الاخيرة ستكون باستيراد ال Provider و ونقوم باحتواء المشروع كاملا داخله 
import React, { useContext } from 'react'; import { Component2Context, Component2Provider } from './context'; export default function App() { return ( <Component2Provider>//الموفر <div> <h1>am the app component</h1> <Component1></Component1> <Component3></Component3> </div> </Component2Provider> ); } وهكذا سنكون حققنا النتيجة المرغوبة 

يوجد طريقتين لتحقيق ذلك الأولى هي في الحالة العامة حيث يمكنك تعيين proxy في ملف package.json بهذه الطريقة
"proxy":"http://localhost:4000/api/" بعدها يمكنك الاتصال بال api عبر تعيين فقط الجزء الذي يأتي بعد /api
import React, { useState, useEffect } from 'react'; export default function Logo() { const [data, setData] = useState(); useEffect(() => { fetch('/posts').then((res) => { setData(res.data); }); }, []); return ( <div> {data && data.map((d) => ( <div> <img src={data.image} alt="image" /> <h1>{data.tilte}</h1> <p>{data.body}</p> </div> ))} </div> ); } وهناك الطريقة الثانية وهي خاصة بالاعدادات فمثلا في axios يمكنك أن تعين الاعدادت ومن ضمن الاعدادات المتوفرة هناك الرابط القاعدي
axiosConfig.js
import axios from 'axios'; const instance = axios.create({ baseURL: 'http://localhost:4000/api/' }); export default instance; يمكنك استيراد axios من الملف الذي في الاعلى وسيكون متوفر لديه رابط قاعدي ويمكنك استخدام فقط الجزء الذي يأتي بعد /api في اتصالاتك بالسيرفر
import React, { useState, useEffect } from 'react'; import axios from './axiosConfig'; export default function Logo() { const [data, setData] = useState(); useEffect(() => { axio.get('/posts').then((res) => { setData(res.data); }); }, []); return ( <div> {data && data.map((d) => ( <div> <img src={data.image} alt="image" /> <h1>{data.tilte}</h1> <p>{data.body}</p> </div> ))} </div> ); }  

يمكنك استخدام flatlist وتفعيل pagination horizontal بهذه الطريقة بعدها يجب ان تبحث عن طريقة
للتمرير عن طريق الضغط على أسهم اليمين والشمال
function Carousel() { return ( <FlatList data={slideList} //البياتات style={{ flex: 1 }} renderItem={({ item }) => { return <Slide data={item} />; //المكون الذي يعرض البيانات }} pagingEnabled //تفعيل خاصية التمرير horizontal // خاصية التمرير الأفقي showsHorizontalScrollIndicator={false} // محدد التمرير /> ); }  

يمكنك أن تنشأ خطاف لاحتواء المنطق الذي يتعامل مع البيانات بهذه الطريقة
import { useState, useEffect } from 'react'; import axios from 'axios'; const useData = () => { const [data, setData] = useState(); useEffect(() => { function getData() { axios.get('http://localhost:5000/posts').then((res) => { setData(res.data); }); } getData(); }, []); return data; }; export default useData;  
ويمكنك استيراده في المكون وهكذا سيكون الكود نظيف ودقيق وهذا مثال بسيط فقط بل يمكنك أن تذهب خطوة الى الامام وتجعل useData دينامكيا عن طريق الشروط والمعايير وتستخدمها في كل المكونات التي تحتوي على منطق يتعامل مع البيانات
import React from 'react'; import useData from './useData'; export default function App() { const data = useData(); return ( <div> {data && data.map((post) => ( <div key={post.id}> <h1>{post.title}</h1> <p>{post.description}</p> </div> ))} </div> ); }  

يجب ان تضيف type لعناصر ال video
<div class="video-container"> <video type="video/mp4" src="images/pizza.mp4" autoplay loop class="vid vid1"></video> <video type="video/mp4" src="images/pizza2.mp4" autoplay loop class="vid vid2"></video> <video type="video/mp4" src="images/video.mp4" autoplay loop class="vid vid3"></video> </div> وايضا لا تسمي الملفات بهذه الطريقة 
good pizza.mp4 تسمية الملفات يجب ان تكون مترابطة 
good_pizza.mp4  

في حالتك انت تحتاج الى متغير اخر ليساعدك في تحديد اسم الطبقة التي تريد تغييرها ويمكنك ان تعطيها الى handleChange بهذا الشكل
onChange={(e) => handleChange(e, 'اسم الطبقة')} ثم يمكنك الاعتماد على ذلك لتغيير ال state بهذا الشكل
const handleChange = (e, objKey) => { const { name, value } = e.target; setForm((prevForm) => ({ ...prevForm, [objKey]: { ...prevForm[objKey], [name]: value } })); }; function App() { const [form, setForm] = useState({ info: { firstname: '', lastname: '', email: '', password: '', confirmPassword: '' }, address: { country: '', city: '', line1: '', line2: '' }, }); const handleChange = (e, objKey) => { const { name, value } = e.target; setForm((prevForm) => ({ ...prevForm, [objKey]: { ...prevForm[objKey], [name]: value } })); }; console.log(form); return ( <div> <h2>signup</h2> <input type="text" placeholder="firstname" name="firstname" value={form.info.firstname} onChange={(e) => handleChange(e, 'info')} /> <input type="text" placeholder="lastname" name="lastname" value={form.info.lastname} onChange={(e) => handleChange(e, 'info')} /> <input type="email" placeholder="email" name="email" value={form.info.email} onChange={(e) => handleChange(e, 'info')} /> <input type="password" placeholder="password" name="password" value={form.info.password} onChange={(e) => handleChange(e, 'info')} /> <input type="password" placeholder="confirmPassword" name="confirmPassword" value={form.info.confirmPassword} onChange={(e) => handleChange(e, 'info')} /> <input type="text" placeholder="country" name="country" value={form.address.country} onChange={(e) => handleChange(e, 'address')} /> <input type="text" placeholder="city" name="city" value={form.address.city} onChange={(e) => handleChange(e, 'address')} /> <input type="text" placeholder="line1" name="line1" value={form.address.line1} onChange={(e) => handleChange(e, 'address')} /> <input type="text" placeholder="line2" name="line2" value={form.address.line2} onChange={(e) => handleChange(e, 'address')} /> </div> ); } export default App;  

اخي جرب هذه ال command
pip list وتحقق ان المكتبة موجودة ان كانت موجودة  فتحقق انك تستخدم النسخة الصحيحة من python وعادة محررات النصوص تضع خط اصفر تحت imports الجديدة في python ويمكنك عمل كود لاستخدام المكتبة و ستجد انها تعمل

في react هنا نوعين من ال input نوع يتحكم فيه المتصفح ويسمى uncontrolled ونوع تتحكم فيه انت يدويا عن طريق الكود الذي تكتبه وهذا يسمى controlled ولا يمكننا استخدام الحالتين معا وفي حالتك انت تحاول استخدامهم معا حيث انه المكون كان يتوقع منك ان تعطي قيمة اولية لل input لكن عوضا عن ذلك انت تعطيه قيمة ال name وهو undefined في حالتك ويمكنك اصلاح هذا فقط باعطاء قيمة اولية ل name و string فارغ يكفي ليجعلك تتحكم في ال input
import React, { useState, useEffect } from 'react'; export default function Login() { const [name, setName] = useState(""); useEffect(() => { console.log(name); }, []); return ( <div> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> </div> ); }  

اولا انت تحتاج لجلب مكتبة axios عن طريق
npm i --save axios او 
yarn add axios ثم قم بتغيير الكود كالتالي
export const fetchProducts = () => { return async (dispatch) => { try { const response = await axios.get("https://rn-shopping-app-69186.firebaseio.com/products.json"); if (!response.status === 200) { throw new Error("Error - something went wrong"); } const resData = await response.data; const loadedProducts = []; for (const key in resData) { loadedProducts.push( new Product( key, resData[key].title, resData[key].imageUrl, resData[key].description, resData[key].price ) ); } dispatch({ type: SET_PRODUCTS, products: loadedProducts, }); } catch (error) { throw error; } }; }; وهذه بعض الاختلافات بين fetch و axios
fetch يرجع body اما axios يرجع data في ال post request يجب ان ننادي JSON.stringify على ال body فيما يخص fetch في fetch طلب الجلب يكون ok عندما تحتوي الاجابة على ok اما بالنسبة ل axios فيجب ان يحتوي طلب الجلب status =200 و statusText يكون ok للحصول على ال json في fetch ننادي الدالة json على الاجابة اما بانسبة ل axios ندخل لل data مباشرة 

اخي انت تفتح الملف عبر الضغط عليه لهذا يطلع معك في المتصفح على شكل رابط لملف محلي
يمكنك ان تستخدم محرر نصوص ك vscode وتفتح فيه المجلد الخاص بمشروعك ثم تقوم بتحميل اضافة live server في vscode وستنبثق لك ايقونتها في الاسفل ويمكنك الضغط عليها وسيفتح مشروعك في الرابط المحلي http://localhost:5000 اما عن https فهذا يمكنك الحصول عليه عن طريق ssl certificate
ويمكنك ان تقرأ هنا كيف تستضيف موقعك على الانترنت

setCount هي عملية asynchronous يعني تحديث ال state لا يكون لحظي ففي اللحظة التي يشتغل فيها console.log ال state لم يتغير بعد لذلك تحصل على ال state قبل ان يتغير.
فاذا كانت لديك عملية لتقوم بها على ال state المتغير فيمكنك تغيير الكود ليصبح كالتالي
import React from 'react'; export default function Counter() { const [count, setCount] = useState(1); const increment = () => { setCount(currentCount => currentCount + 1); }; const decrement = () => { setCount(currentCount => currentCount - 1); }; //عند تحديث الحالة يعاد تشغيل المكون useEffect(() => { console.log(count) }, [count]) return ( <div> <button onClick={decrement}>-</button> {count} <button onClick={increment}>+</button> </div> ); } هكذا ستحصل على ال state بعد تحديثه داءما ويمكنك اجراء العملية التي تريدها على اخر تحديث له
 

في الحقيقة هذا ليس تحذير من react بل هو تحذير من eslint-plugin-react-hooks و eslint في هذه الحالة يريدك ان تضع getPosts كمعيار للخطاف useEffect هكذا
useEffect(() => { getPosts(); }, [getPosts]); لكن هذا قد ينتج عنه ان الدالة ستشتغل في كل اشتغال للمكون وهذا ما لا تريده خاصة ان كانت الدالة لا تعتمد على معايير خارجية متغيرة لذا فالاستخدام الصحيح هنا انك تعرف الدالة داخل الخطاف بهذا الشكل
import React from 'react'; import axios from 'axios'; export default function Users() { useEffect(() => { const getPosts = () => { axios .get('http://localhost:4000/posts') .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); }; getPosts(); }, []); return <div>posts</div>; }  

في الحقيقة هذا خطا شائع و يحصل لي داءما لكن حله بسيط فقط يجب ان تفهم ان المكون عندما تزور صفحة الويب يشتغل مباشرة وفي حالتك انت استجابة السيرفر قد تاخذ بعض الوقت وهنا المكون عندما يشتغل سيحاول الدخول الى معلومات غير متواجدة وهنا يحصل الخطا ويمكنك معالجته بالتاكد ان state في هذه الحالة لا يساوي undefined
import React from 'react'; import axios from 'axios'; export default function Users() { const [res, setRes] = useState(); useEffect(() => { async function getData() { const res = await axios.get('http://localhost:3000/api/users'); if (res.status === 200) { setRes(res); } } getData(); }, []); return ( <div> // هنا نتأكد ان res لا تساوي undefined {res && res.data && res.data.users.map((user) => <p key={user.id}>{user.name}</p>)} </div> ); } وهناك طريقة اخرى لمعالجة المشكلة باستخدام خاصية حديثة يقدمها javascript وهي ال ?
import React from 'react'; import axios from 'axios'; export default function Users() { const [res, setRes] = useState(); useEffect(() => { async function getData() { const res = await axios.get('http://localhost:3000/api/users'); if (res.status === 200) { setRes(res); } } getData(); }, []); return ( <div> {res?.data?.users.map((user) => ( <p key={user.id}>{user.name}</p> ))} </div> ); } هذا الكود
res && res.data && res.data.users يساوي
res?.data?.users  

jsx هو عبارة على javascript نعم لكن هذا لا يخولك لاستخدام كود javascript بالطريقة المعتادة فعناصر ال jsx هي في الحقيقة دوال واذا ترجمنا الكود الذي ارفقته في السؤال فسيكون كالتالي 
return div( for (var i = 0; i < list.length; i++) { post } ) وفي javascript لا يمكننا كتابة كود في منطقة المعاملات لدالة ما ولكن يمكننا توفير المعاملات فقط لذا فالطريقة الصحيحة للوصول لذلك هي اعطاء معامل لعنصر jsx هكذا 
<div>{title}</div> هذا سيترجم الى 
return div(title) وهذا كود javascript صحيح ويمكنك تطبيقه في مثالك بهذه الطريقة :
<div> { list.map((res)=> ( <post list={res} /> ))} </div>  

في المكونات الوظيفية يجب داءما استدعاء React لم افهم هذا في البداية حيث ان المكون لا يستخدمه بطريقة مرئية لأعيننا كهذا المثال
import React from "react" function Person(props) { return ( <p>My name is {props.name}</p> ); }  لكن في الحقيقة المكون سيتحول ليصبح هكذا 
import React from "react function Person(props) { return React.createElement( “p”, null, “My name is “, props.name ); }  وهنا ستستنتج لماذا استدعاء React شئ ضروري حيث ان الكود في الخلفية يستخدم React.createElement ويجب ان نوفرها له

نعم مفهومك عنها صحيح وهي غالبا تستعمل مع الملفات التي تحتوي على عدد لا بأس به من القيم تفاديا لاستهلاك الميموري ويمكنك ان ترى في المثال في الاسفل 
def numbers_sum(nums): result = [] for i in nums: result.append(i+i) return result my_nums = numbers_sum([1, 2, 3, 4, 5]) print(my_nums) # [2, 4, 6, 8, 10] في المثال لدينا قائمة وببساطة نحن نرجع قائمة اخرى للقيم مجموعة لنفسها وطول القائمة هو 5 لكن  لو كانت لديك قائمة طولها 100 مليون وادخلتها للمعالجة في الكود السابق سوف تلاحظ مشاكل في الكمبيوتر وقد يتوقف عن الاستجابة اذا كان كمبيوتر قديم نوعا ما ولحل المشكلة نستخدم generators ونقرا القائمة قيمة بعد قيمة
def numbers_sum(nums): for i in nums: yield(i+i) my_nums = numbers_sum([1, 2, 3, 4, 5]) print(my_nums) # <generator object numbers_sum at 0x7f95f264f518> for num in my_nums: print(num) الكود في الاعلى هو محاكات للكود السابق لكن باستخدام generators الفرق هنا انك ستتلقى كل قيمة على حدى عوض انك ستتلقاهم في قائمة وتلاحظ انني استخدمت for loop للدوران على my_nums وذلك لان for loop لديها القابلية للتوقف عند انتهاء القيم فعند مناداة next  على my_num اكثر من 5 مرات في مثالنا سنتحصل على خطأ برمجي يخبرنا ان القيم انتهت 
print(next(my_nums)) # 2 print(next(my_nums)) # 4 print(next(my_nums)) # 6 print(next(my_nums)) # 8 print(next(my_nums)) # 10 print(next(my_nums)) # error StopIteration