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>
}
Source: stackoverflow.com
Related Query
- How to create dynamic drop down using formik in react?
- How do I create a dynamic drop down list with react-bootstrap
- How to create dynamic MUI Radio in Formik React form
- How to implement Drop down in React JS using Array for the below snippet of code
- How do I create React drop down forms that dynamically updates the list of options?
- How to get the value from drop down selection using react
- How to extract the clicked value in the drop down menu using React Material UI?
- How to create dynamic array using checkbox and mapping in React JS?
- How can i create a dynamic page using parameter in react + Json
- OnChange event using React JS for drop down
- How to create dynamic href in react render function?
- How to create multiple page app using react
- how to create common helper class in React JS using ES6 which is used by another component?
- How to create dynamic refs in functional component- Using useRef Hook
- Swiper React | How to create custom navigation/pagination components using React refs?
- How to inject port and host using ENV variable in Create React App Proxy settings?
- how to get selected value onChange of react redux-form drop down
- How to create a preview (Image and description) to the Url when shared link on Social media,Gmail and Skype using React JS?
- How to create dynamic drag and drop layout with react-grid-layout
- How to create unique key for NavigationStateUtils using push route in React Native/Redux?
- How to create a d3 force layout graph using React
- How to increase the edge drop zone using React Flow
- How to animate dynamic updates in CanvasJS using React functional components?
- how to create list of Years in the dropdown using react js JSX
- How to create dynamic form input fields in React with ANTd
- How to create a dynamic array of React hooks for an array of components
- How do I create a High-Order React Component connected to Redux using Typescript?
- How to dynamically create button for calling specific action using map array in react
- Drop down menu using styled-components: How to properly use class selectors?
- How to create React App including Web3 using create-react-app? I am getting Module not found Error. BREAKING CHANGE: webpack < 5 used
More Query from same tag
- Merging two backgrounds into one
- How to replace image with effect with React?
- Reactjs - How to load component after successful login with GitHub(Firebase)?
- Why does 'key' not propagate to react elements in map of {children} elements?
- Find and replace a matching object in an array - JavaScript
- POST http://localhost:3001/send net::ERR_CONNECTION_REFUSED
- Child component's input field not changing with change in parent's props react
- how to make parent function not work when the button is pressed
- Why is toggling the dropdown when I click enter key on input field?
- Property is missing in type '{ [x: string]: string; }'
- How can I add the 'All' checkbox in order to select all the other options?
- How to calculate and store item property when rendering that item?
- ReactJS: OnChange handler auto submitting data before onClick
- How to define value for useState image in React Native
- React: Create Elements/Tags programmatically / Create React Element from String?
- How to call a function via onChange of a TextField Select type from the MaterialUI package
- How to render html string in reactjs
- How to pass this TypeScript React component an optional prop?
- Why is `mapStateToProps` always an anonymous function?
- How to get latest state value in ReactJS function?
- Components not being rendered in webpack production build
- How to catch HTTP response error and then pass to the caller
- How to solve conflict between react-router-dom v6 and mobx?
- How can I import browser module in next.js without dynamic import
- Not able to Query hyperlinks from GraphQL on Gatsby JS
- Why is the fetch statement in my react app resulting in two calls?
- How to check form is valid or not in react + material?
- Don't run query if parameter is null
- How to test react-router Links with Enzyme?
- How to autoplay embedded you tube videos in react app?