CODEWITHSUNDEEP
javascriptreactjsaxios
DJ2
DJ2

Reputation: 1741

Updating state when dropdown select is changed React

This onChange event handles the selection of a dataschema then makes a subsequent request to get the queryschemas of the selected dataschema. handleChange is working correctly and renders the appropriate querySchemas in a dropdown list.

handleChange = (e) => {
    const dataSchema = this.state.dataSchemas.find(dataSchema => dataSchema.name === e.target.value);
    if (dataSchema) {
      axios({
        method: 'get',
        url: `${dataSchema.selfUri}/queryschemas/`,
        headers: { 'Accept': "" }
      })
        .then(response => {
          console.log(response)
          console.log(JSON.stringify(dataSchema.selfUri));
          console.log(dataSchema.id)
          this.setState({
            querySchemaId: response.data.data[0].id,
            querySchemaUri: response.data.data[0].selfUri,
            querySchemaName: response.data.data[0].name,
            querySchemas: response.data.data, //has list of querySchemas from request
            selectedId: dataSchema.id
          }, () => {
            console.log(this.state.querySchemaId)
            console.log(this.state.querySchemaUri)
            console.log(this.state.querySchemaName)
            console.log(this.state.selectedId)
          });
        })
        .catch(error => console.log(error.response));
    }
  }

  //This is the list of querySchemas returned by the above request
  {
  "data" : [ {
    //array postion [0] -- 
    "id" : "2147483601",
    "selfUri" : "/dataschemas/2147483600/queryschemas/2147483601",
    "name" : "QS-1"
  }, {
    //array position [1]
    "id" : "2147483602",
    "selfUri" : "/dataschemas/2147483600/queryschemas/2147483602",
    "name" : "QS-2"
  } ]
}


  querySchemaChange = e => {
    const querySchema = this.state.querySchemas.find(querySchema => querySchema.name === e.target.value);
    if (querySchema) {
      axios({
        method: 'get',
        url: `/dataschemas/${this.state.selectedId}/queryschemas/${this.state.querySchemaId}/queries`,  //<--- {this.state.querySchemaId} is not updating to show the current querySchema that is selected
        headers: { "Accept": "" }
      })
        .then(response => {
          console.log(response)
        })
        .catch(error => console.log(error.response));
    }
  }

Then the second call is using the querySchemaId to make a request to the specific URI, But querySchemaId: response.data.data[0].id, always grabs the first array from the response, obviously. So my issue is if I choose a different querySchema from the drop down it is always using the response in position [0] to make the next call. How can I keep the name that is selected updated in state and use the id attached to it, so it fires the right request?

These are the select elements rendering the dropdowns

render(){
  return ( 

    <label>
      Pick a DataSchema to filter down available QuerySchemas:
  <select value={this.state.value} onChange={this.handleChange}>
        {dataSchemas &&
          dataSchemas.length > 0 &&
          dataSchemas.map(dataSchema => {
            return <option value={dataSchema.name}>{dataSchema.name}</option>;
          })}
      </select>
    </label>{" "}
    <br />

    <label>
      Pick a QuerySchema to view its corresponding queries status:
    <select value={this.state.querySchemaName} onChange={this.handleChange} onChange={this.querySchemaChange}>
        {querySchemas &&
          querySchemas.map(querySchema => {
            return <option value={querySchema.name}>{querySchema.name}</option>;
          })}
      </select>
    </label>{" "}
    <br />
 )
}

Upvotes: 0

Views: 1124

Answers (1)

xadm
xadm

Reputation: 8418

You forgot to save selected value in the state (for select) and use event data (id) directly (in query url), not from state (setState is async, it will be updated later):

querySchemaChange = e => {
  const querySchema = this.state.querySchemas.find(querySchema => querySchema.name === e.target.value);
  if (querySchema) {
    const {id, name} = querySchema
    this.setState({
      querySchemaId : id, 
      querySchemaName: name
    });
    axios({
      method: 'get',
      url: `/dataschemas/${this.state.selectedId}/queryschemas/${id}/queries`,

querySchemaName is used for current select value. Is saving querySchemaId needed now (not used in query)? Is it used elsewhere?

Upvotes: 1

Related Questions