CODEWITHSUNDEEP
javascriptreactjsfunctioninput
user14801080
user14801080

Reputation: 1

when I try to type something in the form field, It doesn't let me type anything

I need to do a form in react.js but when I try to type something in the form field, It doesn't let me type anything. I create a function for the input e my form. what am i doing wrong? please help me. thanks.

renderInput(title, value, onChange, validateField, placeholder) {
        return (
            <div className="col-12 col-md-4">
                <div className="form-groud">
                <label>{title}</label>
                <input type="text" className="form-control"
                    name={title}
                    value={value}
                    onChange={e => onChange(e)}
                    onBlur={validateField}
                    placeholder={placeholder} />
                </div>
            </div>
        )
    }          

    renderForm() {
        return (
            <div className="form">            
                <div className="row">       
                    {this.renderInput("Avatar", this.state.member.avatar, e => this.updateField(e), this.validateField, "profile picture" )}                  
                    {this.renderInput("Name", this.state.member.name, e => this.updateField(e), this.validateField, "name" )}        
                    {this.renderInput("Email", this.state.member.email, e => this.updateField(e), this.validateField, "email" )}  
                    {this.renderInput("Project", this.state.member.project, e => this.updateField(e), this.validateField, "project" )}                        
                    {this.renderInput("Devices", this.state.member.devices, e => this.updateField(e), this.validateField, "devices" )}                        
                    {this.renderInput("MainStack", this.state.member.mainstack, e => this.updateField(e), this.validateField,"main stack" )}                
                </div>

                <hr />
                <div className="row">
                    <div className="col-12 d-flex justify-content-end">
                        <button className="btn btn-primary"
                            onClick={e => this.save(e)}>
                            Save
                        </button>
                        <button className="btn btn-secondary ml-2"
                            onClick={e => this.clear(e)}>
                            Cancel
                        </button>
                    </div>
                </div>                                
            </div>
        )
    }

My updateField method:

updateField (event) {
        const member = {...this.state.member}
        member[event.target.avatar] = event.target.value
        member[event.target.name] = event.target.value
        member[event.target.project] = event.target.value
        member[event.target.devices] = event.target.value
        member[event.target.mainstack] = event.target.value
        this.setState({ member })
    }

Upvotes: 0

Views: 51

Answers (1)

amghar abdelkarim
amghar abdelkarim

Reputation: 26

you should controll input form value's using react state, in React is called a “controlled component”. So check your updateField function and make sure that it change the state value. https://reactjs.org/docs/forms.html

Upvotes: 1

Related Questions