dropdown with option that changes input field to text input

Question

I'm trying to make a component that is by default a dropdown. It needs to have x amount of pre-populated options with the final option to "create your own". If a user selects "create your own" the dropdown input needs to change to a free text drop down. I've found an example of what I'm looking for in JS but am having trouble implementing it in react. Here is my Select component I just need to add the text div and figure out how to toggle between them. Like the JSFiddle I posted.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { IconChevronDown } from '..';
import './select.scss';

export default class Select extends Component {
  render() {
    const { className, ...props } = this.props;

return (
  <div className={`c-select ${className}`}>
    <select {...props} className={`c-select-select`} />
    <IconChevronDown className="c-select-icon" />
      </div>
    );
  }
}

Select.defaultProps = {
  className: ''
};

Select.propTypes = {
  className: PropTypes.string
};

Here is how it I'm calling it.

<Select
  className="c-quiz-select-form-select"
  onChange="if(this.options[this.selectedIndex].value=='customOption'){toggleField(this,this.nextSibling); this.selectedIndex='0';}"
    // value={selectedAnswer}
  >
    <option value="0" name="optionA">
      OptionA
    </option>
    <option value="1" name="optionB">
      OptionB
    </option>
    <option value="customOption" name="customInput">
      CustomInput
    </option>
    <option value="-1" name="landing">
      Select one
    </option>
  </Select>

http://jsfiddle.net/6nq7w/4/

Thanks,

Answer 1

It should be quite easy. You just need to separate the your dropdown component and input component and render each of those based on the selection. You can probably store the active selection in your component state.

Here is how I would approach it. Just a concept.

https://codesandbox.io/s/2151yy7v2n