Topic: Input component value property does not work with null string

rmedrano23 pro asked 6 years ago


I wrote the following react  app (generated with create-react-app) to demonstrate something that is not working for me. Input field value property does not work with a null string ( "").  In the attached code I have a function that is called with a button. This function assigns the null string to the prop value of the input field but this field shows up in the screen with the previous value (a non null value).  It is interesting that onChange event is able to assign a null string though. Let me know please if I am missing something...  Thanks. Rodolfo.
Forgot to mention: The bootstrap version works as I expect ... the material one is not working as expected.
import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

import { Button, Input} from 'mdbreact'

class App extends Component {

constructor (props) {

super(props)

this.state= {

valor:'Hola'

}

}

clearField= () => {

console.log('limpiarCampo')

// I expect this line to clear the input field but is doesn't...

this.setState({valor:''})

}

answer= () => {

console.log('contestar')

this.setState({valor:'como vas?'})

}

setValue= (valor) => {

console.log('asignarValor')

this.setState({valor:valor})

}

render() {

return (

<divclassName="App">

<Inputtype='text'value={this.state.valor}onChange={e=>this.setValue(e.target.value)}/>

<ButtononClick={this.clearField}>

Limpiar

</Button>

<ButtononClick={this.answer}>

Contestar

</Button>

</div>

);

}

}

export default App;

Jakub Mandra staff answered 6 years ago


Hello Rodolfo, Many thanks for posting this problem. Our input is more complex component and it has its own inner state. I found that it updates value only if it is not falsy, that's why your code doesn't work. Of course we fixed the bug, but it will be released within the new version of mdb on Monday.   Best regards, Jakub

rmedrano23 pro commented 6 years ago

Thanks! I will wait for this release on Monday ... I was about to abandon the material version and use the regular one ... :-)

rmedrano23 pro commented 6 years ago

Any news about this bug?

Jakub Mandra staff commented 6 years ago

Should be good now, please upgrade your mdb package to the newest (4.8.0) version :)

rmedrano23 pro commented 6 years ago

yeahhh it's working correctly now. Tnx a lot.

Jakub Mandra staff commented 6 years ago

That's great :)


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: Mac
  • Browser: Chrome
  • OS: Max OS High Sierra 10.13.6
  • Provided sample code: No
  • Provided link: No