const usStates = [ { "abbreviation": 'AL', "stateName": 'Alabama' }, { "abbreviation": 'AK', "stateName": 'Alaska' }, { "abbreviation": 'AZ', "stateName": 'Arizona' }, { "abbreviation": 'AR', "stateName": 'Arkansas' }, { "abbreviation": 'CA', "stateName": 'California' }, { "abbreviation": 'CO', "stateName": 'Colorado' }, { "abbreviation": 'CT', "stateName": 'Connecticut' }, { "abbreviation": 'DE', "stateName": 'Delaware' }, { "abbreviation": 'DC', "stateName": 'District of Columbia' }, { "abbreviation": 'FL', "stateName": 'Florida' }, { "abbreviation": 'GA', "stateName": 'Georgia' }, { "abbreviation": 'HI', "stateName": 'Hawaii' }, { "abbreviation": 'ID', "stateName": 'Idaho' }, { "abbreviation": 'IL', "stateName": 'Illinois' }, { "abbreviation": 'IN', "stateName": 'Indiana' }, { "abbreviation": 'IA', "stateName": 'Iowa' }, { "abbreviation": 'KS', "stateName": 'Kansas' }, { "abbreviation": 'KY', "stateName": 'Kentucky' }, { "abbreviation": 'LA', "stateName": 'Louisiana' }, { "abbreviation": 'ME', "stateName": 'Maine' }, { "abbreviation": 'MD', "stateName": 'Maryland' }, { "abbreviation": 'MA', "stateName": 'Massachusetts' }, { "abbreviation": 'MI', "stateName": 'Michigan' }, { "abbreviation": 'MN', "stateName": 'Minnesota' }, { "abbreviation": 'MS', "stateName": 'Mississippi' }, { "abbreviation": 'MO', "stateName": 'Missouri' }, { "abbreviation": 'MT', "stateName": 'Montana' }, { "abbreviation": 'NE', "stateName": 'Nebraska' }, { "abbreviation": 'NV', "stateName": 'Nevada' }, { "abbreviation": 'NH', "stateName": 'New Hampshire' }, { "abbreviation": 'NJ', "stateName": 'New Jersey' }, { "abbreviation": 'NM', "stateName": 'New Mexico' }, { "abbreviation": 'NY', "stateName": 'New York' }, { "abbreviation": 'NC', "stateName": 'North Carolina' }, { "abbreviation": 'ND', "stateName": 'North Dakota' }, { "abbreviation": 'OH', "stateName": 'Ohio' }, { "abbreviation": 'OK', "stateName": 'Oklahoma' }, { "abbreviation": 'OR', "stateName": 'Oregon' }, { "abbreviation": 'PA', "stateName": 'Pennsylvania' }, { "abbreviation": 'RI', "stateName": 'Rhode Island' }, { "abbreviation": 'SC', "stateName": 'South Carolina' }, { "abbreviation": 'SD', "stateName": 'South Dakota' }, { "abbreviation": 'TN', "stateName": 'Tennessee' }, { "abbreviation": 'TX', "stateName": 'Texas' }, { "abbreviation": 'VT', "stateName": 'Vermont' }, { "abbreviation": 'VA', "stateName": 'Virginia' }, { "abbreviation": 'WA', "stateName": 'Washington' }, { "abbreviation": 'WV', "stateName": 'West Virginia' }, { "abbreviation": 'WI', "stateName": 'Wisconsin' }, { "abbreviation": 'WY', "stateName": 'Wyoming' } ]; class Form extends React.Component { get stateOptions() { return usStates.map((option, index) => { return <option key={index} value={ option.abbreviation }>{ option.stateName }</option>; }); } handleReset() { console.log('this.refs.select', this.refs.select); requestAnimationFrame(() => { $(this.refs.select).val("NC"); }); } render() { return( <form onReset={ this.handleReset.bind(this) }> <input type="text" defaultValue="FIRST NAME" /> <input type="text" defaultValue="LAST NAME" /> <select ref="select" defaultValue="NC" name="StateCD"> { this.stateOptions } </select> <button type="reset" value="Reset">Reset</button> </form> ) } } ReactDOM.render(<Form />, document.getElementById('reactForm'));
<form action="#"> <input type="text" value="FIRST NAME" /> <input type="text" value="LAST NAME" /> <select name="states" id="states"> <option value="AZ">Arizona</option> <option value="UT">Utah</option> <option selected value="OR">Oregon</option> <option value="CA">Californiuh</option> </select> <button type="reset" value="Reset">Reset</button> </form> <hr> <br> <br> <hr> <div id="reactForm"></div>