Styjun

I hope you're having a nice week.

I'm getting objects from an axios.get request, kind of a research the user can submit. I'm displaying each object in a row of a table like this :
Result of the research

As you can see in the screenshot, each row is a form and the user can modify some inputs, then send back the row via the Save button when they modified it (or not).

The first problem is that when the user click on save for the first time without modifying it, the value of the state corresponding to the input is set to '' so the form return an empty state. Actually, I know why : when I render the input, I set the defaultValue to the value i got from the object, but don't attribute it to the corresponding state. How can I do that?

The second problem, and the one which is the most hard to solve from my point of view is when the user modifies the first row but clicks on the Save button of the second row, it gets the value from the first row... I think it's the onSubmit=this.handleSubmit of my form which fails because this refers to the same thing :

Clicking on Save on Row 2 returns the STAMP of the Row 1

Here is my function which renders a table from a Javascript Object getting from props :

GetLine= () =>
 var datas = this.props.data; //get the datas (Array)
 var ol=(Object.keys(datas)).length; //get length of the array
 var rows=[]; //Will contain the returned

 for(var i=0;i<ol;i++)
 var data=datas[i]; //get the i line of the array
 rows.push(
 <tr key=i>
 <td>
 <form id=i onSubmit=this.handleSubmit></form>
 </td>
 <td>
 <input form=i type="checkbox" name="name1" />&nbsp;
 </td>
 <td>
 <input form=i type="submit" value="Save" className="btn btn-primary"/>
 </td>
 Object.keys(data).map(s => //maping through keys of the object
 s=="VAT" 

 )
 </tr> 
 )

 
 return rows;

An here is my constructor with handleChange; handleSubmit and state :

class SearchBody extends Component{
 constructor(props) 
 super(props);
 this.state=
 ORDERID:'',
 EID:'',
 ALLOCATIONID:'',
 BROKERAGE:'',
 AMOUNT:'',
 SIDE:'',
 STAMP:'',
 VAT:'',
 FTT:'',
 MARKETFEES:'',
 LOCALTAX:'',
 OTHERTAX:'',

 response:,
 onCall : true
 ;
 this.handleChange = this.handleChange.bind(this);
 this.handleSubmit = this.handleSubmit.bind(this);
 

 handleChange = (event) => 
 event.preventDefault();
 switch(event.target.name)
 case "STAMP": 
 this.setState(STAMP : event.target.value); 
 case "VAT": this.setState(VAT : event.target.value);
 case "FTT": this.setState(FTT : event.target.value);
 case "MARKETFEES": this.setState(MARKETFEES : event.target.value);
 case "LOCALTAX": this.setState(LOCALTAX : event.target.value);
 case "OTHERTAX": this.setState(OTHERTAX : event.target.value);
 
 

 handleSubmit = (event) => 
 event.preventDefault();
 console.log("row "+event.target.id);
 console.log(this.state.STAMP);
 

I hope my problem is clear. Thanks everyone for you future answers.

So the answer to the second problem is to create a new component to maintain state and render a row.

The answer to the first problem is this code :

<input ref=this[s]=React.createRef() form=i type="text" name=s defaultValue=data[s] onChange=this.handleChange/>

It will create a ref to the input which is independent because it's named after my key s.

When I want to access the ref, I have to do this :

this.s.current.value

Where s is the name of one of my attribute

And if s is unknown you can do this

Object.keys(data).map(s =>
 console.log(this[s].current.value); 
 )