CODEWITHSUNDEEP
javascriptreactjsaxios
DJ2
DJ2

Reputation: 1751

Populate react dropdown list from axios request returning array of strings

I have an axios get request that returns an array of strings.

class App extends Component {
  //  default state object
  constructor() {
    super();

    this.state = {
      data: []
    };
  }

  componentDidMount() {
    axios
      .get("/dataschema/list")
      .then(response => {
        console.log(response);
        this.setState({ data: response });
      })
      .catch(error => console.log(error.response));
  }
}

When I make this request the web console shows the data part of the response which is

Response:
{
    "data": [
        "Phone Record"
    ],
}

My question is how can I take this string and populate a dropdown list with it?

For context the whole response looks something like this: 

{data: Array(1), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
data:Array(1)
   0: "Phone Record"
   length:1
   __proto__: Array(0)

In my UserForm.js class I passed schemas as a prop

render() {
  const { schemas } = this.props; //schemas references the list received from response and passed as a prop

  return (
    <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick the dataschema to describe your data file:
          <select schemas={this.schemas} onChange={this.handleChange}>
            {schemas &&
              schemas.length > 0 &&
              schemas.map(schema => {
                return <option value="${schema.schemaName}"> </option>;
              })}
          </select>
        </label>{" "}
        <br />
      </form>
    </div>
  );
}

How can I manipulate the response data to fill the dropdown list with the strings that are returned?

EDIT: new shape of data

Response:
{
    "data": [
        {
            "name": "Phone Record"
        }
    ],

Upvotes: 1

Views: 4749

Answers (1)

AngelSalazar
AngelSalazar

Reputation: 3113

App.js since response is a huge object and you only care about data (the array), then it makes sense to store only data as part of your state.

  componentDidMount() {
    axios
      .get("/dataschema/list")
      .then(response => {
        console.log(response);
        this.setState({ data: response.data });
      })
      .catch(error => console.log(error.response));
  }

UserForm.js the element, "option", allows a child that is the mask of its value attribute, so setting the value attribute does not set the value of option's child (in your code you were only setting the value and not the option's child)

render() {
  const { schemas } = this.props; //schemas references the list received from response and passed as a prop

  return (
    <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick the dataschema to describe your data file:
          <select onChange={this.handleChange}>
            {schemas &&
              schemas.length > 0 &&
              schemas.map(schema => {
                return <option key={schema} value={schema}>{schema}</option>;
              })}
          </select>
        </label>{" "}
        <br />
      </form>
    </div>
  );
 }

Upvotes: 1

Related Questions