Input component value property does not work with null strin

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;

Add comment

Jakub Mandra staff answered 6 years ago

0 0 Best answer

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 :)

Add comment

Write

Create snippet

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

rmedrano23

Pro User 17Support score
7Questions 0Answers 0Snippets