CODEWITHSUNDEEP
arraysreactjs
nishant
nishant

Reputation: 117

selecting a particular index from array of objects

i am doing an axios call and the data i receive is array of objects from the backend inside each of which contains a value called result(format - result:"Hello"). There is a button which when clicked should go to the particular index and fetch the value of result specified and pass it . Not sure how exactly to accomplish this .

componentDidMount(){
let payload = this.props.location.state
axios.post(`http://localhost:8200/service/${this.service_name}/requests`,payload)
  .then( response=>{
    console.log(response.data.methods)
    this.setState({
      methods:response.data.methods,
      trace:response.data.methods[0].result  
      // Here above i have written ,but it only fetches from index[0] statically , 
        i want it to select the result of the particular button i press. 
    });
  })
 }
 playitHandler(){
  let payload = {
  "service_name":this.service_name,
  "trace_id":this.state.trace
  }
 }
 <button className="btn btn-primary" onClick={()=>this.playitHandler()}>Display</button>

Tried passing index to ComponentDidMount(){} , i guess we cant pass it there , since it threw an error .

Upvotes: 0

Views: 185

Answers (1)

Jolly
Jolly

Reputation: 1768

When the fetch must be accomplished, exactly? Because, if you perform it when the page is loaded, then you can't retrieve specific data when you press a button. As far as I can see it, you have two possibilities:

  1. Make a retrieveIndexData() function, which takes in input the click event on a button. Inside this function you run the axios call and then you save the data in the index using parseInt(ev.target.value). Though, I don't think this would be the best practice;

  2. You add a property selectedIndex in the state, and, when you click an a button, you save the relative index in that property. Instead, in the axios call you save ALL the indexes. Then, you can work on the data you have selected clicking on a button using this.state.trace[this.state.selectedIndex];

EDIT: Let me explain better the second point. In the state you have the property response.data.methods in which you save all the elements of the methods array, including the one you want to save in the trace property of the state.

Now, since you would just create redundancy in the state, in that setState I would write only: this.setState({ methods: response.data.methods }). You have all you need now in the state!

Finally, I supposed that the button element you show it's just a "0 Button", that if you press, you want the first method. So I guessed you also have a second Button that you consider the second element and so on. If that's correct, than I should expect something like this:

<button className="btn btn-primary" onClick={() => this.playitHandler(0)}Display 0</button>
<button className="btn btn-primary" onClick={() => this.playitHandler(1)}Display 1</button>
...
<button className="btn btn-primary" onClick={() => this.playitHandler(100)}Display 100</button>

Supposed I'm right, then in playitHandler() you can just browse this.state.methods to retrieve what you want:

playitHandler(methodIndex) {
    let payload = {
        "service_name": this.service_name,
        "trace_id": this.state.methods[methodIndex]
    }
}

Is it more clear? I avoided the use of a selectedIndex property in the state in this example, though, I think this way is even more simpler.

Upvotes: 1

Related Questions