CODEWITHSUNDEEP
javascriptreactjs
richa singh
richa singh

Reputation: 63

Dynamically adding Input form field issue reactjs

I am trying to add one cascaded form(inner) field dynamically on click of a button +Add Content. The array for the field is getting updated but the view is still same.

However, when I try to add the outer field on click of a button +Add Heading dynamically its getting added with no issues. Below is the stackblitz url for reference. Thanks in advance.

https://stackblitz.com/edit/react-utjwsu?embed=1&file=index.js

Upvotes: 6

Views: 254

Answers (3)

Arun AK
Arun AK

Reputation: 4370

Your code is working fine and the state is updating perfectly. The problem is that the Content part is added only once in your code. I just used a function which you already added in it

{this.addContentTextBox(element.Content)}

Just replace the AddContentBox function with this:

AddContentBox(){
        return this.state.content.map((element,i)=>(
            <div className="header-content" key={i} >
                <div className="heading-content-wrapper">
                <FormGroup>
                <Label className="set-label-pos upload-img" for="Heading">Heading</Label>
                <input className="form-control" type="text"/>
                </FormGroup>
                {this.addContentTextBox(element.Content)}
                {this.AddContentInput}
                <FormGroup>
                <Button color="success" onClick={this.AddContentInput.bind(this,i)}>+ Add Content</Button>
                </FormGroup>
            </div>
            </div>
        ))
    }

You have the code in that file, but i think you forgot to add it in the function.

Hope it helps :)

Upvotes: 1

Weedoze
Weedoze

Reputation: 13953

You are mixing the content variable. In your function AddContentBox() you are using this.state.content.map(...)

this.state.content is an array of object like {Heading: '', Content: [{value: ''}]}

BUT in your function AddContentInput() your are pushing an object inside an object of this array contents[index].Content.push({value:''})

Depending on your needs you should either push in the root array contents.push({Heading: '', Content: [{value: ''}]} OR iterate the right array in your function AddContentBox() and use this.state.content[0].Content.map(...)

Upvotes: 0

dan
dan

Reputation: 1364

You're only ever rendering one Content field, and the {this.AddContentInput} isn't valid syntax. You can edit the AddContentBox method to render all of the Content fields:

Original:

...
<FormGroup>
    <Label className="set-label-pos upload-img" for="Heading">Content</Label>
    <input className="form-control" type="text"/>
</FormGroup>
{this.AddContentInput}
...

Replaced with:

...
{ this.AddContentFields(element) }
...

and 

AddContentFields(element) {
  return element.Content.map(content => {
    return (
      <FormGroup>
        <Label className="set-label-pos upload-img" for="Heading">Content</Label>
          <input className="form-control" type="text"/>
        </FormGroup>
    );
  })
}

Here's an edited version of the app with my changes: https://stackblitz.com/edit/react-lcy2te

Upvotes: 1

Related Questions