How To Add Nested Object on form Submitting?

Question

https://codesandbox.io/s/reverent-engelbart-1zg2p

////// This is my form.js file

    this.initialState = {id: "", title: "",items: [{id: "",name: "",price: ""}]};
    this.state = this.initialState;}
    handleChange = event => {const { name, value } = event.target;
    this.setState({[name]: value});
  };
  submitForm = () => {this.props.handleSubmit(this.state);};
  render() {
    const { id, title, items } = this.state;
    return (
        <form>
          <input
            type="number"
            name="id"
            placeholder="Category Id"
            value={id}
            onChange={this.handleChange}/> <br />
          <label>Category title</label>
          <br />
          <input
            type="text"
            name="title"
            placeholder="Category title"
            value={title}
            onChange={this.handleChange}/><br />

////// Category Value is fine update but Items value did not update

          <input
            type="number"
            name={items.id}
            placeholder="itemId"
            value={items.id}
            onChange={this.handleChange}/><br />
          <label>Item Name</label><br />
          <input
            type="text"
            name={items.name}
            placeholder="itemName"
            value={items.name}
            onChange={this.handleChange}/><br />
          <label>Item Price</label><br />
          <input
            type="number"
            name={items.price}
            placeholder="itemPrice"
            value={items.price}
            onChange={this.handleChange}/><br />
          <input type="button" value="submit" onClick={this.submitForm} />
        </form>
    ); } }

I missed something in my code but Don't know where and what's wrong. Someone Please Help me..!!!

you can't dot notate dynamically into the object keys like that, you'd have to write a function to handle it: https://stackoverflow.com/questions/18936915/dynamically-set-property-of-nested-object — BlackICE, Feb 28 '20 at 07:19

score 0 · Answer 1 · answered Feb 28 '20 at 06:56

For this you should have handleChange function something like this.

async onChange(e, index) {
    if (
      ["id", "name", "price"].includes(
        e.target.name
      )
    ) {
      let cats = [...this.state.items];

      cats[index][e.target.name] = e.target.value;
      await this.setState({
        cats
      });
    } else {
      await this.setState({ [e.target.name]: e.target.value });
    }
    console.log(this.props.vall);
  }

you can map your form input value then you can declare your value.i hope it will help you.

{this.state.items.map((inputField, index) => (
       <form key={`${inputField}~${index}`}>
          <input
            type="number"
            name={inputField.id}
            placeholder="itemId"
            value={items.id}
            onChange={e => {
                          this.onChange(e, index);
                        }}/><br />
          <label>Item Name</label><br />
          <input
            type="text"
            name={inputField.name}
            placeholder="itemName"
            value={items.name}
            onChange={e => {
                          this.onChange(e, index);
                        }}<br />
          <label>Item Price</label><br /> 
         and so on ......
       </form>
      ))}

when I tried to update the state it shows items.map is not a function..Please any solution for this..Here is the link of the code.. https://codesandbox.io/s/reverent-engelbart-1zg2p — Karma Dorje Tamang, Mar 04 '20 at 07:36

Pritam · Answer 2 · 2020-02-28T08:38:14.907

0

For a single form render you don't need to initialise items as array in state, always better to declare as object like this :

this.state = {
      id: "",
      title: "",
      items: { id: "", name: "", price: "" }
};

Now if you want to update nested object then create a separate handler do this

handleChangeItems = (event) => {
    const { name, value } = event.target;
    this.setState({
    items: { ...this.state.items, [name]: value }
});
}

Hope this will fix ur issue. If you need the same state as you mentioned then please let me know.

edited Feb 28 '20 at 08:38

answered Feb 28 '20 at 07:23

Pritam

68
7

yes, you are right, but if i separate and create another handle Change function then my form should be break into two parts..i don't want to break my form.. If you want to look my structure here is the link.. https://codesandbox.io/s/reverent-engelbart-1zg2p – Karma Dorje Tamang Feb 28 '20 at 07:48
Try this : https://codesandbox.io/s/stupefied-minsky-8my1s I have fixed all things and no designs are breaking. – Pritam Feb 28 '20 at 08:37
OK, you tried your best but still there's a problem..after your edit it display items.map is not a function when clicked submit. – Karma Dorje Tamang Feb 28 '20 at 11:27
I have checked and found that after submit your data passing as object and .map() not applicable on object. Thats why error is throwing. You can tell me what you want to achieve so I can help you with that. – Pritam Feb 29 '20 at 08:10
bro i tried to submit data as an array but the problems is it separate from the initial state and display only data that are submitted from form... Can you please fix the problems.. – Karma Dorje Tamang Mar 02 '20 at 10:29

How To Add Nested Object on form Submitting?

2 Answers2