Adding multiple divs or renders in ReactJs

Question

I'm having trouble in wanting to create multiples of the same html that I render in a certain class. For example, I have a div that might look like this

[Header goes here, is a input field] [Dropdown] [TextArea]

[Submit]

[Add another field]

On add another field, I would like to clone this view and be able to add as many again.

Here's what I have so far:

var UpdateForm = React.createClass({

    handleSubmit : function(e) {
      e.preventDefault();
    var title = React.findDOMNode(this.refs.title).value.trim();
    var date   = React.findDOMNode(this.refs.date).value.trim();
    var body  = React.findDOMNode(this.refs.body).value.trim();



    if(!title||!date || !body ) {
        return;
    }

    this.props.onSubmit({title:title, date : date, body : body});

        React.findDOMNode(this.refs.title).value = '';
        React.findDOMNode(this.refs.date).value = '';
        React.findDOMNode(this.refs.body).value = '';
        //React.findDOMNode(this.refs.sub).value = '';

    },

    render: function() {

    return(
    <div id = "This is what I want to duplicate on each button click">
        <form className="form-horizontal" onSubmit={this.handleSubmit}>
        <div class="form-control">
        <label className="col-sm-0 control-label ">Title:</label>
        <div class="col-sm-5">
        <input className = "form-control" type = "text" placeholder="Title...." ref = "title"/>
        </div>
        </div>
        <div class="form-control">
        <label className="col-sm-0 control-label ">Date:</label>
        <div class="col-sm-5">
        <input className = "form-control" type = "text" placeholder="Date...." ref = "date"/>
        </div>
        </div>
        <div className="form">
        <label htmlFor="body" className="col-sm-0 control-label">Report Body:</label>
        <div className="column">
        <textarea className = "ckeditor" id = "ckedit"   ref = "body"></textarea>

        </div>
        </div>



        <div class="form-group">
        <label className="col-sm-0 control-label"></label>
        <div class="col-sm-5">
        <input type = "submit" value="Save Changes" className = "btn btn-primary" />
        </div>
        </div>
        </form>

    <div className="btn-group">
    <button type="button" className="btn btn-danger">Assign to</button>
    <button type="button" className="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span className="caret"></span>
        <span className="sr-only">Toggle Dropdown</span>
    </button>
    <ul className="dropdown-menu">
    {
        this.props.forms.map(function(form){

    return (
    <li><a href ="#">{form}</a></li>


  )})}
    </ul>
    <button className="btn btn-success btn-block" onClick={this.addInputField}>Add Subform</button>
    </div>
        </div>
);
}
});

What I think I need to add:

addDiv: function(e) {
        e.preventDefault();
        //have a array of divs?
        //push a the same div into it?
        //then set state of that array?

    }

I know in jquery I could just write a function that appends this markup whenever I hit a button, but i don't know how to think about it here at all.

So make a React view. Now you want multiple of the view? Put another view on top and when you want another, make another instance of the subview. — Cymen
– Cymen, Commented Jun 19, 2015 at 19:23
Im confused on what that means. Are you saying, when I call it in another class, just call it again? For example, var MainClass = React.createClass({ render() { //generic code here <UpdateForm /> //and then over and over again?)} — Karan
– Karan, Commented Jun 19, 2015 at 19:33
what exactly is the issue you're having? do you want to render additional markup when the button is submitted? — badAdviceGuy
– badAdviceGuy, Commented Jun 19, 2015 at 21:03
I would like additional markup generated at a click of a button, but I would like for it to have the same functionality of a class I created. So if I had created a class called 'ReportForm' then it would generate the markup for report form and handle the post request(ajax). I want to at a click of a button generate another instance of this class incase the user wants to fill out an additional form. — Karan
– Karan, Commented Jun 22, 2015 at 12:03

David Langer · Accepted Answer · 2015-06-19 22:00:16Z

1

I think what you want is to have a button which add another header-date-body-Component to the form, which should then also be submitted, right?

If so then you need to think more in components. Have one Component which handles the form. Have one around that which handles adding other forms.

<ReportDialog>
  <ReportForm>
  <ReportForm>
  <button onClick={this.addReport}>Add another</button>
</ReportDialog>

To accomplish the multiple ReportForms you need to think about the data in your component, which are reports (I assume). So you need a state in ReportDialog which keeps track of your reports. so at the start of the app you have one report:

getInitialState: function () {
  return {
    reports: [{ title: '', body: '', date: new Date() }]
  };
}

So in addReport you then need to change the state and add another report. To have these reports rendered you already used map, but this time you need to loop over the reports in your component and return a ReportForm for each report.

answered Jun 19, 2015 at 22:00

David Langer

2961 silver badge4 bronze badges

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

2 Comments

Karan Over a year ago

I haven't got it quite working yet, but I think I am close, so I selected your answer as the best answer as of now.

David Langer Over a year ago

Great, happy to answer any questions you have :)

Collectives™ on Stack Overflow

Adding multiple divs or renders in ReactJs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related