`The below example is for binding the data in table with the Header Title Weight and Mapping Column.
Bt Mapping column each row is a drop down with A20,A30,A40.
In the table it self on dropdown change I want to call a event for that particular row it find the weigh column and the row count will be more with that weight for that drop down.

`import React , { useState }from "react";


`function App() { 

 const [data, setData] = useState([]);

   const result =        [
                        {
                            Title: "Pannel",
                            Mapping: "A20",
                            Weight:"5"
                        },
                        {
                            Title: "Fire",
                            Mapping: "A20",
                            Weight:"10"
                        },
                        {
                            Title: "Fuel",
                            Mapping: "A30",
                            Weight:"15"
                        },
                        {
                            Title: "Circuit",
                            Mapping: "A30",
                            Weight:"10"
                        },
                        {
                            Title: "Air",
                            Mapping: "A40",
                            Weight:"20"
                        },
                        {
                            Title: "Pipe",
                            Mapping: "A40",
                            Weight:"30"
                        }
               ]
        setData(result);

 return (
    <div>   
     <table>
        <thead>
           <th>Title</th>
           <th>Weight</th>
            <th>Mapping</th>
        </thead>
        <tbody>
        {data.map((item) => (
          <tr>
            <td> {item.Title}</td>
            <td>{item.weight}</td>
            <td>
                <select>
                  <option>{item.Mapping}</option>
                  <option>A20</option>
                  <option>A30</option>
                  <option>A40</option>
        </select>
      </td>
     </tr>
           ))}
       </tbody>
   </table>
   </div>    
    
 ); 

}

export default App;`

I am using react for binding the data in html table from the json data.

The result is showing in a table with value and for Mapping column the value is binded in drop down with A20,A30,A40.

How can I make a josn   when I change in 2nd row dropdown value from A20 to A30 ,then one more row will Add as A30 and A20 row will reduce and similarly when I change in 5th row dropdown value from A40 to A20 ,then one more row will Add as A20 and A40 row will reduce
    

So A20 row will be 2 and A30 rows will be 3 and A40 rows will be 1 and the Json will become

        var Finalresult = [
                            {
                            Title: "Pannel",
                            Mapping: "A20",
                            Weight:"5"
                            },
                        {
                            Title: "Fire",
                            Mapping: "A30",
                            Weight:"10"
                        },
                        {
                            Title: "Fuel",
                            Mapping: "A30",
                            Weight:"15"
                        },
                        {
                            Title: "Circuit",
                            Mapping: "A30",
                            Weight:"10"
                        },
                        {
                            Title: "Air",
                            Mapping: "A20",
                            Weight:"20"
                        },
                        {
                            Title: "Pipe",
                            Mapping: "A40",
                            Weight:"30"
                        } 
               ]
    What changes I have to do in html table to modify the json data`