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,

Sid · Accepted Answer · 2019-02-24 01:56:48Z

3

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

answered Feb 24, 2019 at 1:56

Sid

5,8633 gold badges38 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rowdy5280 Over a year ago

Thanks a lot that really helps. I'm new to React and was not sure about how to listen for the event inside the component.

Sid Over a year ago

If it helped, you can either upvote or accept the answer

Collectives™ on Stack Overflow

dropdown with option that changes input field to text input

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related