Populate react dropdown list from axios request returning array of strings

Question

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"
        }
    ],

DJ2 · Accepted Answer · 2019-01-24 22:51:56Z

1

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>
  );
 }

edited Jan 24, 2019 at 22:51

DJ2

1,7613 gold badges37 silver badges77 bronze badges

answered Jul 9, 2018 at 17:13

AngelSalazar

3,1131 gold badge19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DJ2 Over a year ago

Could you elaborate on the changes?

Collectives™ on Stack Overflow

Populate react dropdown list from axios request returning array of strings

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related