CODEWITHSUNDEEP
javascriptreactjs
Mary
Mary

Reputation: 157

React Toggle Switch Show/Hide View

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

Please check the image below: enter image description here

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!

Upvotes: 0

Views: 2122

Answers (1)

Pablo
Pablo

Reputation: 6048

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.

Upvotes: 2

Related Questions