הי,
נתחיל בדברים הפשוטים - משתנים ב JavaScript מתחילים באות קטנה, אז עדיף valMiddle
לגבי השורה הזאת:
const choosenColor = document.getElementById("myColor").value;
כשאנחנו בונים קומפוננטת ריאקט צריך לזכור שאתה לא יודע איך ישתמשו בקומפוננטה הזאת או מאיזה מקומות במסך. אז דמיין שמישהו יוצר כמה פעמים את הקומפוננטה ועכשיו הקוד רץ, אז getElementById יחזיר לך את האלמנט הראשון שמתאים, אפילו שיש כמה אלמנטים כאלה על המסך (אחד לכל קומפוננטה).
באופן כללי עדיף לא להשתמש ב id בתוך קומפוננטת ריאקט מהסיבה הזאת.
לגבי הלולאה הזאת:
for(let i=0 ; i<8 ; i++){
myArray.push( '#' + (Math.random().toString(16) + "000000").substring(2,8) );
document.getElementById(i).style.background = myArray[i];
}
כאן אנחנו ממשיכים עם אותה טעות של ה id. עדיף לייצר את המערך מחוץ לפונקציה change (בפונקציה הראשית ChooseColor) ואז להשתמש בערכים ישירות בתוך ה JSX.
ואחרון בדף התרגיל הצעתי להשתמש בספריה tinycolor כדי לקבל סידרה של צבעים מתוך הערך שנבחר כלומר שלא יהיה אקראי:
נ.ב. בשביל ה jsx עצמו עדיף להשתמש ב flexbox ולא בטבלה:
https://www.tocode.co.il/bundles/frontend/lessons/flexbox?tab=video
אשמח לראות גירסה מתוקנת וכמובן לעזור בכל שאלה אם יש