score:0
to get the installation name, simply use inst.name
.
i reproduced your example. play with it a little bit and feel free to ask any related questions.
class app extends react.component {
ondropdownselected = (e) => {
if (e.target.value !== '') {
const inst = json.parse(e.target.value)
console.log('installation name:', inst.name);
}
}
generateinstallations = () => [...array(100)].map((val, i) => (
{ _id: `special-${i}`, name: `installation #${i}` }
));
render() {
const installations = this.generateinstallations();
return (
<div>
<h4>select your installation:</h4>
<select id="myselect" onchange={this.ondropdownselected}>
{installations.map(installation =>
<option
key={installation._id}
name={installation._id}
value={json.stringify(installation)}>
{installation.name}
</option>
)}
</select>
</div>
);
}
}
reactdom.render(<app />, document.getelementbyid('react'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="react"></div>
score:0
i did this way, made value as an index in dropdown and just assigning this index to array of object, and getting object value i need :
ondropdownselected =(e)=>{
if (e.target.value !== '') {
this.setstate({
inst: this.state.installations[e.target.value]
})
<select onchange={this.ondropdownselected} disabled >
{this.state.installations.map((option, index) =>
<option key={index} value={index}>
{option.name}
</option>)}
</select>
Source: stackoverflow.com
Related Query
- React get dropdown from array of object selected when value is an object
- select option from dropdown using API and get that selected value but i am getting last value which i have not selected in react
- Cannot get the Selected Value from Materialize dropdown with React JS
- Get selected dropdown value from react to nodejs
- Unable to get the selected value from the React fluent UI dropdown
- React ES6: Get selected value in dropdown list using semantic UI
- Get first object from array of objects in react
- how to get the key of a selected value from a dropdown in reactjs?
- How to get the selected value from a radio button group in React where there are multiple groups?
- Need Get to element based on consecutive object property or properties from array of object i have a value to search
- How to get current selected value from dropdown in react-bootstrap-typeahead?
- How to reduce and get value from object array using javascript
- How to get value from object property in React or Javascript
- Get object array from axios and using return value call another axios function and append the output to first result
- Unable to get selected value from react-select AsyncSelect dropdown
- Mirroring the position when moving objects from the array to the array to another object in React
- I get data from Api but when I try to set the value with useState it give me an empty object
- How to get the value of selected option from React hooks?
- Material React Select Multiple: How i can remove from my array when i click in a selected element?
- How to get value from object in react
- In React JS, how to get value from multiple input fields when one of them is changed
- How to correctly type a null value in typescript react app, retrieved from an JSON object (api call) when using Object.entries to retrieve the value?
- react facing error when want to get specific value from back-end
- React <Typeahead> get selected array object id
- how to get selected item in an array from another functional component react
- How to Get Selected Value from a Select Input in react
- best way to change value of an object from an array of objects when given a key
- array object working if we hardcode data but not working when we populate data from Node js to react js
- How can I change the value of an object in an array in react redux when the action is called?
- Extract selected value from a dropdown in REACT
More Query from same tag
- Get row count of a string inside a div
- How to use "where" argument in a query using graphql and mongodb?
- React dynamically add image
- Using jQuery inside of a React render function
- How to add one component in another based on event in React?
- ReactJS - Target random element
- How can you make a table scrollable in Semantic-UI-React? Using Next.js
- React Js Math Issues
- REACT - How Should i pass values from html in React?
- VScode messes JSX format (beautify)
- create-react-app - Fetch Local JSON (via AJAX)
- Toggling between dark/light mode Material UI
- Data in array items not being displayed on the screen in React
- Calling one action from another action creator
- Print out JSON data in React
- Why is setDetails empty, then data appears?
- State updates only once inside a div's scroll event handler
- What is the correct syntax to signInWithRedirect using firebase?
- React: How to build a string with state values?
- Dynamic className together with a fixed class name in a custom component
- Cypress: how to test routes status code throughout entire test?
- React.JS Function return not returning
- React Material-UI menu anchor lost because of re-rendered by react-window
- why ReactDOM is not defined in my helloworld program?
- Why is my react.memo not working? How to properly memoize a child's child?
- Is it possible to make SVG equal to path?
- How can I center-align Material-ui TextField text and also set a min number value?
- Is it possible to write this a shorter way in React using onClick?
- React-Redux: Actions must be plain objects. Use custom middleware for async actions
- How to pass the array index value from array mapping to onClick function in React?