React.js setting value of input

Question

I am a beginner with react.js and it\'s amazing but I am facing a real problem: I need to set the value of an input using plain and pure javascript but form some reason reac

Answer 1

First of all, you should never ever work with "document" object in React.js. It is a big no no. You should not access DOM element neither, but if you know what you are doing(like animations) you should create "ref" object, which is off the topic, to access DOM element.

First thing you should have an object inside the state object for your form. Lets say you have "username" and "password" fields in your form.

state={form:{username:"","password:""}

Because input fields have their own state, whatever we type in there will be stored in the input field. We should get rid of the state of input field and only rely on the state object. We want to have single source of truth so convert "input" to “controlled element”. Controlled elements do not have their own state, they get all data, via props and they notify changes to the data by raising events. We are using "value" prop to set inputs value. Since input fields are initialized as empty strings, we will not be able to type something inside input field. Solution is we have to handle the change event for input fields dynamically.

handleChange=e=>{
    const form={...this.state.form}
    form[e.currentTarget.name]=e.currentTarget.value
    this.setState({account})}

<input value={this.state.form.username} change={this.handleChange} name="username"/>
<input value={this.state.form.password} change={this.handleChange} name="password" />