Chapter 8React Tutorial~1 min read

Lists & Keys

Lists — Arrays Render करणे

React मध्ये arrays render करायला .map() method वापरतात. प्रत्येक rendered item ला unique key prop द्यायला हवा — React ला efficiently update करायला मदत होते.

Simple array .map() करणे

jsx

function FruitsList() {
  const fruits = ["Apple 🍎", "Mango 🥭", "Banana 🍌", "Orange 🍊"];

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
        // key — unique identifier, React साठी mandatory
      ))}
    </ul>
  );
}

Objects Array Render करणे

Real data — objects array

jsx

function StudentList() {
  const students = [
    { id: 1, name: "Rahul Patil",  marks: 85, city: "Pune" },
    { id: 2, name: "Priya Sharma", marks: 92, city: "Mumbai" },
    { id: 3, name: "Amit Desai",   marks: 78, city: "Nagpur" },
  ];

  return (
    <div>
      <h2>Students ({students.length})</h2>
      {students.map((student) => (
        <div key={student.id}>  {/* id = best key */}
          <h3>{student.name}</h3>
          <p>Marks: {student.marks}</p>
          <p>City: {student.city}</p>
        </div>
      ))}
    </div>
  );
}

Components च्या List Render करणे

.map() → Component per item

jsx

// StudentCard component
function StudentCard({ student }) {
  return (
    <div className="card border rounded p-4 mb-2">
      <h3 className="font-bold">{student.name}</h3>
      <p className="text-sm">Marks: {student.marks}</p>
      <span className={student.marks >= 40 ? "text-green-500" : "text-red-500"}>
        {student.marks >= 40 ? "Pass ✅" : "Fail ❌"}
      </span>
    </div>
  );
}

// List component
function StudentList({ students }) {
  return (
    <div>
      {students.map((s) => (
        <StudentCard key={s.id} student={s} />
        // key — parent मध्ये द्यायचा, StudentCard आत नाही
      ))}
    </div>
  );
}

📌

Key म्हणून array index (key={i}) वापरणे avoid करा! Items add/remove/reorder झाल्यास bugs येतात. Database ID किंवा unique field वापरा. Index फक्त static lists साठी ठीक आहे.

✅ Key Points — लक्षात ठेवा

▸.map() — array → JSX elements
▸key prop — प्रत्येक list item वर mandatory
▸Key unique + stable असायला हवा
▸Database ID — best key
▸key={index} — avoid करा, bugs येतात

0/12 chapters पूर्ण

मागे — Previous

Conditional Rendering

पुढे — Next

useEffect Hook