Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: MDBSwitch with React Context API - not rendering the screen changes

David J free asked 5 years ago


I am using MDBSwitch as follows:

<div className='d-flex'>
     <MDBSwitch checked={this.context.settings.switch1} 
    onChange={this.handleSwitchChange(1)}
    labelLeft="" labelRight=""  
/>

I am then using React Context API to insert some text into the display as follows:

<UserConsumer>
     {({ tilt }) => <p> Hi {tilt}</p>}
</UserConsumer>

Also in my screen I have 2 buttons - pressing one toggles the other off etc. On initial entry - I see 'Hi' displayed.

in the onChange handler I set some text in 'the context variable - tilt. However that text is not then being displayed. So it appears that MDBSwitch may not be causing a re-render??

If I press one of my MDBBtn's to toggle between one button and the other, the tilt text does then get displayed. so MDBBtn press is causing the re-render.

It is difficult to be certain as there is already an outstanding defect with MDBSwitch that causes the onchange handler to be run twice

On initial entry I see 'Hi' displayed if I press the MDBSwitch - the text doesn't appear - till I click one of the unrelated buttons. enter image description here


David J free answered 5 years ago


Resolved. Not a problem.


Christian Aichner pro commented 5 years ago

Hi!

I think it would look alot cleaner, if you would mark your question as "resolved" and not just close it :)

Just the perfectionist in me haha

Best regards, Chris


David J free commented 5 years ago

'Resolved' might infer MDB had addressed it. In this instance I resolved this myself so 'closed' was appropriate.


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.19.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No