score:2

Accepted answer

you receive the error message because your field component is an input field by default which can't have children. if you want it to be a select element, you can use the as prop:

<field
  classname="form-control"
  as="select"
  onchange={this.onitemtypedropdownselected}
  name="itemtype"
>
  <option>...</option>
</field>

you mentioned in a comment that it's not really necessary to use map, the only reason you wanted that is because you're coming from java. if your keys are strings (as in your example), you can use plain objects instead of map. if you want to use map however, you can convert a json object like this for example:

function objtomap(obj) {
  let map = new map();

  for (let [key, value] of object.entries(obj)) {
    map.set(key, value);
  }

  return map;
}

edit: as you're no longer using map, i've updated the snippet below:

state = {
  itemtypes: {},
};

componentdidmount() {
  axios
    .get('/itemtypes')
    .then((response) => {
      this.setstate({
        itemtypes: response.data,
      });
      // you don't use this.createitemtype() here 
      // just iterate over the state.itemtypes in render
    })
    .catch((error) => {
      console.log(error);
    });
};

render() {
  const options = [];
  for (let [key, value] of object.entries(this.state.itemtypes)) {
    options.push(
      <option key={key} value={key}>
        {value}
      </option>
    );
  }

  return (
    <field
      classname="form-control"
      as="select"
      onchange={this.onitemtypedropdownselected}
      name="itemtype"
    >
     {options}
    </field>
  }

Related Query

More Query from same tag