title: Duplicate updation of table rows for select option element?
body: <pre class="lang-py prettyprint-override"><code>import React from &quot;react&quot;
  import { useState } from &quot;react&quot;;
  
  
  export const CreateStudent = () =&gt; {
      const [student, setstudent] = useState({
          id: &quot;&quot;,
          university: &quot;&quot;,
          institute: &quot;&quot;,
          website: &quot;&quot;
      });
  
      const { id, university, institute, website } = student;
  
  
      const [stuDetails, setstuDetails] = useState([]);
  
      const [branch, setbranch] = useState([&quot;CSE&quot;, &quot;ECE&quot;, &quot;EEE&quot;, &quot;IT&quot;, &quot;CE&quot;]);
  
      const [selectedBranch, setselectedBranch] = useState(&quot;&quot;)
  
      const [result, setresult] = useState([])
  
      const getBranch = (e) =&gt; {
          setselectedBranch(e.target.value);
          console.log(e.target.value)
  
      }
  
      const [degree, setdegree] = useState([&quot;BCA&quot;, &quot;BTech&quot;, &quot;MTech&quot;, &quot;MCA&quot;, &quot;PG&quot;])
  
      const [selectedDegree, setselectedDegree] = useState(&quot;&quot;)
  
      // const [resultone, setresultone] = useState([])
  
      const getDegree = (e) =&gt; {
          setselectedDegree(e.target.value)
          console.log(e.target.value)
      }
  
      const [radioBtn, setradioBtn] = useState(&quot;&quot;);
  
      const handleRadioBtn = (e) =&gt; {
          setradioBtn(e.target.value)
  
      }
  
      
  
      const clearform = () =&gt; {
          setstudent({
              id: &quot;&quot;,
              university: &quot;&quot;,
              institute: &quot;&quot;,
              website: &quot;&quot;
  
          })
      }
  
      const handleChange = (e) =&gt; {
          let newStudent = { ...student }
          newStudent[e.target.name] = e.target.value;
          setstudent(newStudent);
      };
  
      const handleDelete = (id) =&gt; {
          let newStuDetails = stuDetails.filter((mystu) =&gt; mystu.id !== id);
          setstuDetails(newStuDetails)
  
      }
  
      const [index, setindex] = useState(0)
  
  
      const handleEdit = (myStudent, i) =&gt; {
          setstudent(myStudent)
          setindex(i)
      }
  
      const handleAdd = () =&gt; {
          let newStuDetails = [...stuDetails]
          newStuDetails.push(student);
          setstuDetails(newStuDetails)
          clearform()
      }
  
      const handleUpdate = () =&gt; {
          let newStuDetails = [...stuDetails]
          newStuDetails[index] = student;
          setstuDetails(newStuDetails);
          clearform()
      }
  
  
  
  
      return (
          &lt;div&gt;
              &lt;form&gt;
  
                  &lt;label htmlFor=&quot;&quot;&gt;Id: &lt;/label&gt;
                  &lt;input type=&quot;text&quot; name=&quot;id&quot; value={id} onChange={(e) =&gt; { handleChange(e) }} /&gt; &lt;br /&gt;
  
  
  
                  &lt;label htmlFor=&quot;&quot;&gt;University Name: &lt;/label&gt;
                  &lt;input type=&quot;text&quot; name=&quot;university&quot; value={university} onChange={(e) =&gt; { handleChange(e) }} /&gt; &lt;br /&gt;
  
                  &lt;label htmlFor=&quot;&quot;&gt;Institute Name : &lt;/label&gt;
                  &lt;input type=&quot;text&quot; name=&quot;institute&quot; value={institute} onChange={(e) =&gt; { handleChange(e) }} /&gt; &lt;br /&gt;
  
  
                  Branch : &lt;select value={selectedBranch} onChange={(e) =&gt; { getBranch(e) }}&gt;
                      {branch.map((brc, i) =&gt; (
                          &lt;option value={brc} key={i}&gt;{brc}&lt;/option&gt;
                      ))}
                  &lt;/select&gt; &lt;br /&gt;
  
                  Degree : &lt;select value={selectedDegree} onChange={(e) =&gt; { getDegree(e) }}&gt;
                      {degree.map((deg, i) =&gt;
                          (&lt;option value={deg} key={i}&gt;{deg}&lt;/option&gt;))}
                  &lt;/select&gt;
  
                  &lt;span&gt;&amp;nbsp;&amp;nbsp;&lt;/span&gt;
                  &lt;span&gt;&amp;nbsp;&amp;nbsp;&lt;/span&gt;
  
                  &lt;input type=&quot;radio&quot; value=&quot;Pursuing&quot; checked={radioBtn === &quot;Pursuing&quot;} onChange={(e) =&gt; { handleRadioBtn(e) }} /&gt;
                  &lt;label htmlFor=&quot;&quot;&gt;Pursuing&lt;/label&gt;
  
                  &lt;span&gt;&amp;nbsp;&amp;nbsp;&lt;/span&gt;
                  &lt;span&gt;&amp;nbsp;&amp;nbsp;&lt;/span&gt;
  
                  &lt;input type=&quot;radio&quot; value=&quot;Completed&quot; checked={radioBtn === &quot;Completed&quot;} onChange={(e) =&gt; { handleRadioBtn(e) }} /&gt;
                  &lt;label htmlFor=&quot;&quot;&gt;Completed&lt;/label&gt; &lt;br /&gt;
  
  
  
  
  
                  &lt;label htmlFor=&quot;&quot;&gt;College Website : &lt;/label&gt;
                  &lt;input type=&quot;text&quot; name=&quot;website&quot; value={website} onChange={(e) =&gt; { handleChange(e) }} /&gt; &lt;br /&gt;
  
                  &lt;button onClick={handleAdd} type=&quot;button&quot;&gt;Add Student&lt;/button&gt;
                  &lt;button onClick={handleUpdate} type=&quot;button&quot;&gt;Update Student&lt;/button&gt;
  
              &lt;/form&gt;
  
              &lt;table className=&quot;table&quot;&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Id&lt;/th&gt;
                          &lt;th&gt;University&lt;/th&gt;
                          &lt;th&gt;Institute&lt;/th&gt;
                          &lt;th&gt;Branch&lt;/th&gt;
                          &lt;th&gt;Degree&lt;/th&gt;
                          &lt;th&gt;Website URL&lt;/th&gt;
                          &lt;th&gt;Edit&lt;/th&gt;
                          &lt;th&gt;Delete&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
  
                      {stuDetails.map((student, i) =&gt; {
                          return &lt;tr key={i}&gt;
                              &lt;td&gt;{student.id}&lt;/td&gt;
                              &lt;td&gt;{student.university}&lt;/td&gt;
                              &lt;td&gt;{student.institute}&lt;/td&gt;
                              &lt;td&gt;{selectedBranch}&lt;/td&gt;
                              &lt;td&gt;{selectedDegree}&lt;/td&gt;
                              &lt;td&gt;{student.website}&lt;/td&gt;
  
  
                              &lt;td&gt;&lt;button className=&quot;btn btn-warning&quot; type=&quot;button&quot; onClick={() =&gt; { handleEdit(student, i) }}&gt;Edit&lt;/button&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;button className=&quot;btn btn-danger&quot; type=&quot;button&quot; onClick={() =&gt; { handleDelete(student.id) }}&gt;Delete&lt;/button&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      })}
  
                  &lt;/tbody&gt;
              &lt;/table&gt;
  
  
          &lt;/div&gt;
      )
  
  }
  </code></pre>
  <p>When I am trying to display the dropdown option in table, for the first detail there is no issue but when I am trying to add the second detail the first detail dropdown is also changing. Can you help me with the steps briefly ??</p>