score:1

Accepted answer

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

score:0

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(...)

score:1

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 :)


Related Query

More Query from same tag