Menu

gitpiper

Select react Code Snippet in 2024

componentsinputbeginner

Last Updated: 4 December 2024

Renders an uncontrolled <select> element that uses a callback function to pass its value to the parent component.

  • Use the the selectedValue prop as the defaultValue of the <select> element to set its initial value..
  • Use the onChange event to fire the onValueChange callback and send the new value to the parent.
  • Use Array.prototype.map() on the values array to create an <option> element for each passed value.
  • Each item in values must be a 2-element array, where the first element is the value of the item and the second one is the displayed text for it.
const Select = ({ values, onValueChange, selectedValue, ...rest }) => { return ( <select defaultValue={selectedValue} onChange={({ target: { value } }) => onValueChange(value)} {...rest} > {values.map(([value, text]) => ( <option key={value} value={value}> {text} </option> ))} </select> ); };
const choices = [ ['grapefruit', 'Grapefruit'], ['lime', 'Lime'], ['coconut', 'Coconut'], ['mango', 'Mango'], ]; ReactDOM.render( <Select values={choices} selectedValue="lime" onValueChange={val => console.log(val)} />, document.getElementById('root') );

react snippet similar to Select For You in December 2024

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2024 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️