Trying to pass variable outside the function

user_12046779 0
Viewed 66

I want to pass the index variable from mapping to event change function. Here is the code:

{this.data &&
  this.data.map((item, index) => (
    <tr className="table-info" key={index}>
      <td>{index}</td>
      <td>{item.namaPengirim}</td>
      <td>{item.namaPenerima}</td>
      <td>{item.jenisPengiriman}</td>
      <td>{item.berat}</td>
      <td>{item.volume}</td>
      <td>{item.Harga}</td>
      <td>
        <select
          onChange={(key, event) => {
            this.props.onProsesChange(key, event, index);
          }}
          value={this.props.proses}
          className="form-control"
        >
          <option></option>
          <option value="Delivered">Delivered </option>
          <option value="On Process">On Process</option>
        </select>
      </td>
    </tr>
  ))}

As you can see, the index variable is outside the onchange function. When I tried to pass it, it returns undefined in console.log.

this is my onProsesChange in App.js

onProsesChange( event , index){

   let data = JSON.parse(localStorage.getItem('proses'))
   console.log(data)
   console.log(this.state.proses)
   console.log(index)
   if(data && data[index]){
    data[index]=event.target.value   
    this.setState({...this.state,proses:data})
    localStorage.setItem('proses',JSON.stringify(data))
   }else{
    data[index]=event.target.value
    this.setState({...this.state,proses:[event.target.value]})
    localStorage.setItem('proses',JSON.stringify([data]))

   }
    
}
jsx react-router reactjs javascript
1 Answers

Issue

The function signature doesn't match with how it is being called.

onProsesChange(event, index) {
  let data = JSON.parse(localStorage.getItem("proses"));
  console.log(data);
  console.log(this.state.proses);
  console.log(index);
  if (data && data[index]) {
    data[index] = event.target.value;
    this.setState({ ...this.state, proses: data });
    localStorage.setItem("proses", JSON.stringify(data));
  } else {
    data[index] = event.target.value;
    this.setState({ ...this.state, proses: [event.target.value] });
    localStorage.setItem("proses", JSON.stringify([data]));
  }
}

...

onChange={(key, event) => {
  this.props.onProsesChange(key, event, index);
}}

When called it is passed key, the event object, and finally index.

Solution 1

Match up the signatures by also consuming key

onProsesChange(key, event, index) {
  let data = JSON.parse(localStorage.getItem("proses"));
  console.log(data);
  console.log(this.state.proses);
  console.log(index);
  if (data && data[index]) {
    data[index] = event.target.value;
    this.setState({ ...this.state, proses: data });
    localStorage.setItem("proses", JSON.stringify(data));
  } else {
    data[index] = event.target.value;
    this.setState({ ...this.state, proses: [event.target.value] });
    localStorage.setItem("proses", JSON.stringify([data]));
  }
}

Solution #2

Match up the signatures by not passing key

onChange={(key, event) => {
  this.props.onProsesChange(event, index);
}}
user_86908570
Related