CODEWITHSUNDEEP
javascriptreactjs
user47143
user47143

Reputation: 75

React render a component on click after another react component

Very new to react. I'm creating a page with a series of dropdowns, and the idea is when you select an option on one dropdown, an identical dropdown is appended right below it.

All of the divs and selects/options are React components, and I tried to give one of them the initial state "firstTime == true" and then when you click an option, (if it's true), it renders another <Dropdown /> element below the event.target.parentElement. 

var Dropdown = React.createClass({
  getInitialState: function () {
    return{firstTime: true};
  },
  change: function(event){
    var x = event.target;
    this.state.firstTime==true ? ReactDOM.render(<Dropdown options={OptionChoices} dropdownClass="Poop" />, wrapper) : console.log("oh well");
    this.setState({firstTime: false});
  },
  render: function() {
    return (
      <select onChange={this.change} className={this.props.dropdownClass}>
        {this.props.options.map(function(option){
          return (
              <Option value={option.value} key={option.value}>{option.label}</Option>
            );
        })}
    </select>
    );
  }
});

Unfortunately it keeps coming up with "Target container is not a DOM element." which makes sense because I'm trying to put it in a react-generated element, but is not too helpful for what I'm trying to do.

Any and all help is appreciated, and sorry if this is a really basic question.

Fiddle: https://jsfiddle.net/y4wfLy1z/

Upvotes: 1

Views: 3022

Answers (1)

Hayo
Hayo

Reputation: 149

I would suggest to render always both select options (the first and the the one in render) and hide the second options on the first call.

So on the change event of the first call you change the state variable for the visibility (this.state.dropdownClass) that hides the second element. On change you set the className to the wanted class property (this.props.dropdownClass).

In ES6 this would look like following:

export default class Dropdown extends React.Component {
    constructor() {
        super();
        this.firstTime = true;
        this.first_options = [{value: 'first1', label: 'First Option 1'}, {value: 'first2', label: 'First Option 2'}];
        this.state = {dropdownClass: 'hide'};
    }

    change(event) {
        console.log('change');
        this.setState({dorpdownClass: this.props.dropdownClass});
    }

    render() {
        return (
           <div>
               <select onChange={this.change.bind(this)} className='Poop'>
                    {this.first_options.map(function (option) {
                        return (
                            <option value={option.value} key={option.value}>{option.label}</option>
                        );
                    })}
                </select>
                <select onChange={this.change.bind(this)} className={this.props.dropdownClass}>
                    {this.props.options.map(function (option) {
                        return (
                            <option value={option.value} key={option.value}>{option.label}</option>
                        );
                    })}
                 </select>
           </div>
       );
    }
}

Upvotes: 1

Related Questions