Τι δεν επιτρέπεται να γράψετε στον κώδικα JavaScript στο πλαίσιο του JSX;

Δεν επιτρέπεται η χρήση των ακόλουθων δομών:

• Τελεστές ανάθεσης (εκτός αν βρίσκονται εντός ιδιοτήτων όπου ανατίθεται τιμή).
• Τελεστής τριών (?:) χωρίς ρητή επιστροφή τιμής.
• Βρόχοι (for, while, do/while) χωρίς να περικλείονται σε συναρτήσεις που επιστρέφουν στοιχεία JSX.
• Δηλώσεις if/else χωρίς περικλείσεις σε συναρτήσεις που επιστρέφουν στοιχεία JSX ή χωρίς χρήση του τελεστή τριών.
• Μπλοκ κώδικα ({}) χωρίς ρητή επιστροφή στοιχείων JSX (π.χ. μόνο δηλώσεις μεταβλητών).
• Ενδογενείς σχολιασμοί // μέσα σε JSX ή /* μέσα σε JSX */, εκτός σχολίων μετά από τελεστές ή μεταξύ ιδιοτήτων/στοιχείων.

Επιτρέπεται η χρήση:

• Εκφράσεων που επιστρέφουν τιμές (μεταβλητές, συναρτήσεις, κλήσεις μεθόδων).
• Λογικοί τελεστές && και ||.
• Τελεστή τριών ? :.
• Αντικείμενα και πίνακες (αν αποδίδονται ως λίστα ή στοιχείο).
• Κλήσεις μεθόδων πινάκων (map, filter, κ.ά.) που επιστρέφουν στοιχεία JSX.
• Συναρτήσεις που επιστρέφουν στοιχεία JSX.

Παράδειγμα

// Μη επιτρεπτό
const element = <p>
  let x = 10; // Ανάθεση
  x++; // Αύξηση
</p>;

// Μη επιτρεπτό
const element = <p>
  if (condition) { // Δήλωση if
    return 'True';
  } else {
    return 'False';
  }
</p>;

// Επιτρέπεται με χρήση συναρτήσεων
const renderContent = (condition) => {
  if (condition) {
    return <p>'True'</p>;
  } else {
    return <p>'False'</p>;
  }
};
const element = <div>{renderContent(true)}</div>;

// Επιτρέπεται με τριών τελεστή
const element = <p>{condition ? 'True' : 'False'}</p>;

// Επιτρέπεται με &&
const element = <div>{condition && <p>Visible</p>}</div>;

// Επιτρέπεται με map
const listItems = items.map(item => <li key={item.id}>{item.name}</li>);
const element = <ul>{listItems}</ul>;