How to automatically generate Input fields related to list of items React.JS

Question

I'm having a problem in dynamically generating input fields in react. So I have a keys state and I need to have an input field for each key and also I have tried this link: How to implement a dynamic form with controlled components in ReactJS? but the problem is that the my values state is empty so it will render nothing regarding keys and when I did it with this.ModifyList() it shows input fields regarding each key but it does not have onChange mehtod. the onChange method causes the error when using the this.createUI() . Also in the end I would like to submit the values of input fields.

Is there any suggestion on how to solve this problem?

my Code Below:

export class FileUploadComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            //Keys: [],
            //values: [],
            modify: { Keys: ['key1' , 'key2' , 'key3'], values: [] }

        }
        this.handleSubmit = this.handleSubmit.bind(this);

    }
    
    createUI() {
        const { modify } = this.state;
        const keys = modify.Keys
        const values = modify.values
        const val = keys.map(function (item, i) {
            values.map(function (el, i) {
                return <div key={i}>
                    <label>{item}</label>
                    <input type="text" onChange={this.handleChange.bind(this, i)} />
                </div>
            })

        });
        return val;
    }
    
    handleChange(event, i) {
        const {modify} = this.state;
        let values = [...modify.values];
        values[i] = event.target.value;
        this.setState({ values: values });

    }
    handleSubmit(event) {
        alert('A name was submitted: ' + this.state.values.join(', '));
        event.preventDefault();
    }

    ModifyList() {
        const { modify } = this.state;
        const keys = modify.Keys
        const val = keys.map(function (item, i) {
            return <div>
                <label>{item}</label>
                <input type="text" />
            </div>

        });
        return val;
    }
        render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    {/*this.ModifyList()*/}
                    {this.createUI()}
                    <input type="submit" className="btn btn-primary" value="Search !" />
                     <input type="submit" className="btn btn-primary" value="Edit !" />
                 </form>
             </div>
        )
    }
}

export default FileUploadComponent

what is the error you get when `onChange` called? you can use a better data structure instead of having one array for the keys and another for the values you can use an object have all keys you want and empty value for each property — Ali Faris, Dec 03 '20 at 16:50
I think your parameters in your `handleChange` are reversed. I think it should be `handleChange(event, i)`. — technicallynick, Dec 03 '20 at 16:51
@AliFaris yes I have changed it to modify: {Keys: [ ] , values :[ ] } but still same error, TypeError: Cannot read property 'handleChange' of undefined in case of this.createUI() — Mohammadreza Arabameri, Dec 03 '20 at 17:07
@lissettdm Hi I have changed `let values = Array.of(this.state.Keys.length)` to this, so now `handleChange` shows no error but it does not show Keys as labels tags. actually it renders nothing — Mohammadreza Arabameri, Dec 03 '20 at 17:52
As @AliFaris says, maybe you should use other data structure, for example : this.state = { : { values: [], ...} }, or this.state = { : } — lissettdm, Dec 03 '20 at 18:04

score 0 · Accepted Answer · answered Dec 03 '20 at 19:14

You have some some scope issue. One of the main difference between a fat-arrow function and a function declared with the function keyword is that the latter has its own scope, meaning that if you call this inside of it, you are referencing its scope.

In your createUI function, switch your functions to fat-arrow functions and you are all set. Just remember to bind your handle change function in your constructor.

export class FileUploadComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      //Keys: [],
      //values: [],
      modify: { Keys: ["key1", "key2", "key3"], values: [""] }
    };

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  createUI() {
    const { modify } = this.state;
    const keys = modify.Keys;
    const values = modify.values;
    
    const val = keys.map((item, i) => {
      return values.map((el, i) => {
        return (
          <div key={i}>
            <label>{item}</label>
            <input
              type="text"
              onChange={(event) => this.handleChange(event, i)}
            />
          </div>
        );
      });
    });
    return val;
  }

  handleChange(event, i) {
    const { modify } = this.state;
    let values = [...modify.values];
    values[i] = event.target.value;
    this.setState({ values: values });
  }

  handleSubmit(event) {
    alert("A name was submitted: " + this.state.values.join(", "));
    event.preventDefault();
  }

  ModifyList() {
    const { modify } = this.state;
    const keys = modify.Keys;
    const val = keys.map(function (item, i) {
      return (
        <div>
          <label>{item}</label>
          <input type="text" />
        </div>
      );
    });
    return val;
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          {/*this.ModifyList()*/}
          {this.createUI()}
          <input type="submit" className="btn btn-primary" value="Search !" />
          <input type="submit" className="btn btn-primary" value="Edit !" />
        </form>
      </div>
    );
  }
}

How to automatically generate Input fields related to list of items React.JS

1 Answers1