CODEWITHSUNDEEP
javascriptreactjscheckboxstate
StuffedPoblano
StuffedPoblano

Reputation: 695

showing select on check reactjs

I am trying to get a select to show/hide on check but the select just renders and does not disappear nor reappear. I am fairly new to react, so I am sure I am doing something wrong.

export default class TreeTest extends Component {
  constructor() {
    super();

    this.state = {
      checked: [
        '/grantSettingsPermissions/Admin',
        '/grantSettingsPermissions/ContentGroups/AddLocations', 
      ],
      expanded: [
        '/grantSettingsPermissions',
        '/grantSettingsPermissions/ContentGroups',
      ],
    };

    this.onCheck = this.onCheck.bind(this);
    this.onExpand = this.onExpand.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  onCheck(checked) {
    console.log(checked);
    this.setState({
      checked,
    });
  }

  onExpand(expanded) {
    this.setState({
      expanded,
    });
  }

  handleChange() {
    this.setState({
      checked: !this.state.checked,
    });
  }

  render() {
    const { checked, expanded } = this.state;
    const content = this.state.checked
    ? <select>
  <option value="test1">test1</option>
  <option value="test2">test2</option>
</select>
      : null;
    return (
            <div>
              { content }
              <CheckboxTree
                  checked={checked}
                  expanded={expanded}
                  nodes={nodes}
                  onCheck={this.onCheck}
                  onExpand={this.onExpand}
                  expandDisabled={true}
                  onChange={ this.handleChange }
              />
          </div>
    );
  }
}

I have a feeling I just need to add stuff to the onCheck function, but I am not entirely sure. Any help would be awesome!

Upvotes: 0

Views: 379

Answers (2)

Mikkel
Mikkel

Reputation: 7777

I'm not sure what your component CheckboxTree does, but here is some info that applies to regular input controls:

Your event handler onChecked is expecting checked to be the value of your checkbox, but in fact it will be an event object. So you need to get the value from the event object and set the state with that:

  onCheck(e) {
    console.log(e);
    let checked = {checked: e.target.value}
    this.setState({
      checked,
    });
  }

UPDATE

I see from the documentation that they are doing it the same way, so it should work, because your code is equivalent to this:

  onCheck={checked => this.setState({ checked })}
  onExpand={expanded => this.setState({ expanded })}

Upvotes: 1

Andrii Starusiev
Andrii Starusiev

Reputation: 7764

Your condition should be:

const content = this.state.checked.length === 0
  ? <select>
    <option value="test1">test1</option>
    <option value="test2">test2</option>
  </select>
  : null;

Upvotes: 1

Related Questions