Set the value of an Input component.

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Set the value of an Input component.

awolfard pro asked 7 years ago

Hi,I think I do something terribly wrong here but here is the test case which illustrates my problem. I have two input fields with a certain value. There comes my first question. How do I set the value? Via value = {} or defaultValue = {} or something else?Then I want to change the content of the 2 inputs via a button. I made an example for it. The state is changed but I don't see any value (or only the initial value when I use defaultValue) in my Input components (tried with both value={} and defaultValue={}).Could you help me out here?Thanks in advance./Arnoud import React from "react"; import {Input, Button} from 'mdbreact'; export class InputTest extends React.Component { constructor(props) {     super(props);     this.state= {       value1 :"Value1",       value2 :"Value2"     }     this.onSwitch=this.onSwitch.bind(this); } onSwitch() {     const newState=Object.assign({}, this.state);     const newValue2=newState.value1;     newState.value1=newState.value2;     newState.value2=newValue2;     this.setState(newState); } render() {     return (     <form>       <div>         <Input label="Value1"defaultValue={this.state.value1}></Input>         <span>Value1 has value {this.state.value1}</span>     </div>     <div>         <Input label="Value2"defaultValue={this.state.value2}/>         <span>Value 2 has value: {this.state.value2}</span>     </div>     <div>       <Button onClick={this.onSwitch}>Switch values</Button>     </div> </form> ); } }

Mikołaj Smoleński staff answered 7 years ago

Hi, You can set the label for input exactly like You wrote above, just replace 'defaultValue' with 'label'.  To change the text inside input You can only type it manually. Regards

awolfard pro commented 7 years ago

Hi Mikolaj, Thanks for the reply. That you can change the text inside the input only manually is that on purpose and does it also apply to for instance dropdowns? I can imagine scenarios where a value is automatically selected in a dropdown (or even a value is set in a text input) when the value of another dropdown (or other input) changes. Other scenario could be responding to a redux state change where you have to show something else in an input. That the text inside an input can only be changed by hand is not sufficient for me right now. Do you think this can be added in a future release? Regards, Arnoud.

Mikołaj Smoleński staff commented 7 years ago

We are constantly developing MDB React and considering all clients tips or suggestions. We'll do our best to allow users manipulating dropdown or input values in the next releases. Regards

awolfard pro commented 7 years ago

Thanks

footnootes commented 6 years ago

has defaultValue been included for MDB input?

Anna Morawska staff answered 6 years ago

Hi there,yes, you can use the valueDefault prop

import React from "react";
import { MDBInput } from "mdbreact";

const InputPage = () => {
  return (
    <MDBInput label="Material input" valueDefault="some value" />
  );
}

export default InputPage;

Please check out MDBInput documentation here, especially API tab.

Write
Create snippet
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
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
awolfard
Pro User
12Support score
3Questions 1Answers
0Snippets likes 0Snippets