React Toggle Switch Show/Hide View

Question

I'm stuck in my project. I need to show/hide two dropdown selections on toggle switch (on/off).

Please check the image below:

This is my sample code:

handleSwitch = (event, index) => {
    // TODO if true then display the empty dropdown selectionss
    console.log("event.target.checked", event.target.checked);
    console.log("index", index);
    this.setState({ toggleInputField: true });
}

{days.map((day, dayIndex) =>
 <Container key={dayIndex}>
  <Row>
<Col>
  <Switch
    nativeControlId='my-switch'
    checked={regularHours && regularHours.periods && regularHours.periods[this.findArrayIndex(regularHours.periods, day.openDay, 'openDay')] ? true : false}
    onChange={(e) => this.handleSwitch(e, dayIndex)} />
</Col>

<Col>
     <select className="form-control m-b--15" value={day.openTime} name={'openTime' + dayIndex} onChange={(event) => this.handleAddTimes(event, day)}>
       <option value="" key={0}>Select Time Open</option>
        {
          openingHours && openingHours.map((time, index) => 
            <option value={time} key={index}>{time}</option>
          )
        }
     </select>
    </Col>
    <Col>
      <select className="form-control m-b--15" value={day.closeTime} name={'closeTime' + dayIndex} onChange={(event) => this.handleAddTimes(event, day)}>
        <option value="" key={0}>Select Time Closed</option>
        {
          openingHours && openingHours.map((time, index) => 
            <option value={time} key={index}>{time}</option>
          )
        }
      </select>
    </Col>

  <Row>
</Container>)}

I just don't have an idea to keep track of the checked toggle switches and display accordingly the dropdown selections.

Any ideas? I would gladly appreciate any help. Thanks!

It's probably possible, but I don't think it's that great of an option to control a `select` tag with events elsewhere. If you still wish to go this way, there several suggestions here: https://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due — OFRBG, Aug 21 '20 at 02:39
@Cehhiro thanks but that is not what I intend to do to. I just need to show/hide an HTML select when a toggle switch is on or checked. — Mary, Aug 21 '20 at 02:41
Ah, so you only need to show hide the element itself, and not the dropdown with the options? A straightforward way to do this would be using the CSS display prop. `style={{display: 'none'}}` will hide it. — OFRBG, Aug 21 '20 at 02:52

score 2 · Answer 1 · answered Aug 21 '20 at 03:24

Essentially you need to make each row a component so they can each control their own state or you can control their state from the the parent component. Since you only provided an excerpt of the code I am assuming you know your way around in react and will provide an example using functional components and hooks for simplicity.

function MyRow({day}) {
    let [show, setShow] = useState(true)
    
    return (
        <Row>
            <Col>
              <Switch
                nativeControlId='my-switch'
                checked={show}
                onChange={(e) => setShow(e.target.checked)} />
            </Col>
            {show && 
                <Col>
                    <!-- Code here -->
                </Col>
                <Col>
                      <!-- Code here -->
                </Col>          
            }
        <Row>
    )
}

function Main({days}){
    return (
        <Container>
            {days.map((day, dayIndex) => <MyRow key={dayIndex} day={day} />)}
        </Container>        
    )
}

I hope you can apply your own logic to the idea above. Disclaimer: I did not test the code so there might be some typos.

React Toggle Switch Show/Hide View

1 Answers1