🧾 1. Rendering Lists

• React uses Array.map() to render lists of elements.
• Each child in a list should have a unique key prop.

Example:

jsx
const fruits = ['Apple', 'Banana', 'Mango'];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

✅ Notes:

• The key helps React track which items change.
• Prefer unique IDs if available (avoid using index for changing lists).

🧾 2. Forms in React

• React uses controlled components, meaning form input values are managed via state.

Example:

jsx
import { useState } from "react";

function FormExample() {
  const [name, setName] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Hello, ${name}!`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>Name: </label>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

✅ Notes:

• Each input has a value tied to state.
• The onChange updates that state.
• Use e.preventDefault() to stop form reload.

🧾 3. Conditional Rendering