Setting checkbox with click of another element - react

Question

What I am trying to do here is set the value of the checkbox to 'checked' (because it is styled as a slider) when I click on the <i className='icon-gear'. I'm having trouble accessing input to change it's state. Am I missing something here or am I going about it the wrong way/what would be the better way to approach it? Thanks ahead of time for the help!

const Slider = () => {
  return (
    <div className="slider-container">
      <label className="switch">
        <input type="checkbox" />
        <span className="slider round" />
      </label>
      <p className="batch-slider-title"> Batch Widget </p>
    </div>
  );
};

class Settings extends Component {
    constructor() {
      super();

     this.state = {
        isWidgetDisplayed: false,
        checked: false,
     };

      this.showWidget = this.showWidget.bind(this);
     }

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

  mouseOut() {
     this.setState({showing: false});
  }

  mouseOver() {
     this.setState({showing: true});
  }

  render() {
      const batchWidget = this.state.isWidgetDisplayed ? <BatchWidget /> : null;
      const slider = showing => {
      if (showing === true) {
         return <Slider />;
      }
         return null;
      };
     return (
     <div>
        <div className="settings">
           <i className="icon-gear" onMouseOut={() => this.mouseOut()} onMouseOver={() => this.mouseOver()} onClick={this.showWidget} />
         </div>
           {slider(this.state.showing)}
           {batchWidget}
        </div>
      );
     }
   }

You're not passing the checked state to your Slider component, and to your input. How were you expecting to modify it without passing anything to it? — azium
– azium, Commented Aug 8, 2017 at 19:54

jmargolisvt · Accepted Answer · 2017-08-08 20:08:57Z

2

<input type="checkbox" /> should be <input type="checkbox" checked={this.props.checked}/>

And it should receive those props via <Slider checked={this.state.checked}/>

edited Aug 8, 2017 at 20:08

answered Aug 8, 2017 at 19:55

jmargolisvt

6,1165 gold badges32 silver badges50 bronze badges

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

5 Comments

azium Over a year ago

the input isn't defined in the same component where the sate lives, so while you're generally correct, the exact answer would need to be modified to receive it as props

Bobby Tables Over a year ago

@azium & jmargolis - that's what I've been trying, however I get thrown a type error saying 'cannot read property state of undefined'

azium Over a year ago

you're almost there! Slider is not a class component so there's no this to get props from!

Bobby Tables Over a year ago

Now I'm getting property 'props' undefined. I've tried passing it through the Slider function, still can't figure out why I'm getting thrown this error

jmargolisvt Over a year ago

@azium is right. Either make the Slider a Component, or pass the prop another way. Sry, I don't have more time.

Collectives™ on Stack Overflow

Setting checkbox with click of another element - react

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related