Topic: InputRange - unclear warnings when used

Satanko pro asked 6 years ago


Hi, when I use InputRange I get warnings on loading the component. Whether I pass a number into 'value' or a string I get a warning. When passing a number:
<InputRange min={0} max={100} value={this.sliderValue}
            getValue={this.onChangeSlider}/>
modules.js?hash=ff734b4192910c020630489b4c0624764a04b77f:21211 Warning: Failed prop type: Invalid prop `value` of type `number` supplied to `t`, expected `string`. When passing a string:
<InputRange min={0} max={100} value={this.sliderValue+''}
            getValue={this.onChangeSlider}/>
Warning: Failed prop type: Invalid prop `value` of type `string` supplied to `t`, expected `number`. I suppose it is correct to use numbers. But the warning is distracting.  

Satanko pro commented 6 years ago

Besides that, it would be great to have the option 'step' as it is available in a regular input object. E.g. I'd like to set only numbers like 10, 20, 30, 40, 50....

patatagrammar pro commented 6 years ago

I am having the same issue with the latest version, 4.7.1

Jakub Mandra staff commented 6 years ago

Are error logs the same?

Jakub Mandra staff answered 6 years ago


By the way, good suggestion with 'step' option. Will add to our tasks.

Jakub Mandra staff answered 6 years ago


Well that is really confusing problem. Can't see any bad code or issues while using your code within fresh CRA application. I suggest you to update mdb to the newest version, which we released today, maybe there were some issues during your previous installation.   Best, Jakub

Satanko pro answered 6 years ago


Well, can nesting be a problem? Never had that so far... That is my code:
<Modal size="lg" isOpen={this.modalShow} fade={false} toggle={this.toggleModal}
               className={this.props.className}>
  <ModalHeader toggle={this.toggle}>Add amount</ModalHeader>
  <ModalBody>
	<Container fluid className="text-black">
	   <Row>
	     <Col md="2" className="">Amount: </Col>
	     <Col md="10" className="mr-auto">{this.selectedRow.totalAmount}</Col>
	   </Row>
	   <Row>
             <Col md="6" className="ml-auto">
		<Input label="New Amount"
			value={this.sliderValue}/>
	     </Col>
	     <Col md="6" className="ml-auto">
		<InputRange min={0} max={100}
			    value={this.sliderValue+''}
			    getValue={this.onChangeSlider}/>
	     </Col>
	   </Row>
        </Container>
     </ModalBody>
  <ModalFooter>
     <Button color="primary" onClick={this.addAmount}>Aufbuchen</Button>{' '}
     <Button color="danger" onClick={this.toggleModal}>Abbrechen</Button>
  </ModalFooter>
</Modal>
I can't see any problem. Maybe do you? Kind regards, Josef

Jakub Mandra staff answered 6 years ago


Well, that is strange. This problem never occured. I also tested it on fresh CRA app and i goes well. Maybe you're nesting this component somewhere, which causes the conflicts?   Regards, Jakub

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.0
  • Device: Laptop
  • Browser: Chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: No