ReactJS fields are not editable for Dynamic Fields

Question

I have a requirement wherein I need to create fields dynamically through JSON. I have created my components as required and the page is rendered with required fields. But the fields are in non editable state, even though I had a onchange function in InputField js file. Following is the part of the code from my component

onChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        })
    }
    render() {
        return (
          this.props.screenField.fieldType === 'INPUT'
            ? <div className='form-group'>
                    <label htmlFor={this.props.screenField.name}>{this.props.screenField.label}:</label>
                    <input type={this.props.screenField.dataType === 'BOOLEAN'
                        ? 'checkbox'
                        : this.props.screenField.dataType}
                        name={this.props.screenField.name}
                        id={this.props.screenField.name}
                        placeholder={this.props.screenField.helpText}
                        required={this.props.screenField.isRequired}
                        value={this.props.screenField.value} className='form-control'
                        onChange={this.onChange.bind(this)}/>
                </div>
            : null
          )
    }

Please find the URL below of the entire code.

https://github.com/yvsivateja/ReactJSApplications/tree/one/React-json-render

So what is the question?

nbkhope
– nbkhope

2017-03-17 16:40:11 +00:00
Commented Mar 17, 2017 at 16:40 — nbkhope
– nbkhope, Commented Mar 17, 2017 at 16:40

MrCode · Accepted Answer · 2017-03-17 16:43:56Z

1

The React philosophy is that props should be immutable and to use the state if you need to change something.

Bind the value to the state not props. In the constructor set the initial state:

constructor(props) {
  super(props);
  this.state = {[this.props.screenField.name] : this.props.screenField.value};
}

bind to the state:

value={this.state[this.props.screenField.name]} className='form-control'

answered Mar 17, 2017 at 16:43

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pathfinder Over a year ago

How do I pass all these fields when onSubmit is clicked??

MrCode Over a year ago

Where is your onSubmit event? I would keep the state principle here but move it up such that the form or parent of the inputs maintains the state and also can be where the onChange function can be. You can then pass the onChange function as a prop.

Pathfinder Over a year ago

My submit is in parent form i.e., two levels up to this form

MrCode Over a year ago

ok, move the state up to the form and then you can get all of the values from the form state in the onSubmit event.

Pathfinder Over a year ago

Is there any other way other than that?? As i need to create a method in all the parents and call its parent from the child which is kind of wrong i believe... Or am i wrong??

nbkhope · Accepted Answer · 2017-03-17 16:44:38Z

0

You might want to move all the logic out of the render function as that is usually good practice. The render function should only contain the components defined in a declarative way, just like HTML.

One thing you seem to be missing is the braces that are used to evaluate an expression inside JSX. Whatever you have in the return statement right now should be enclosed in {}:

{this.props.... === 'INPUT' ? ... : ...}

As I mentioned before, think about moving that outside render. Maybe you could use an if statement before the return. Another option is extracting the div into its own component (or just return it from a helper function).

answered Mar 17, 2017 at 16:44

nbkhope

7,5144 gold badges44 silver badges59 bronze badges

Collectives™ on Stack Overflow

ReactJS fields are not editable for Dynamic Fields

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related