I have following code

 <div id="content"></div>

      <script type="text/babel">

      var Tableforbasictask = React.createClass({

              render: function() {

                    return (
                              <form  class="table-responsive" onSubmit={this.handleSubmit}>

                               <table className="table table-bordered table-striped-col nomargin" id="table-data">
                                    <tr align="center">
                                        <td>Task  Name</td>
                                        <td>Standard Discription of Task</td>
                                        <td>Employee Comment</td>
                                        <td>Employee rating</td>
                                    </tr>

                                <tr>
                                    <td>
                                        <input
                                          className="form-control"
                                          type="text"
                                          placeholder="Your Taks Name"
                                        />
                                    </td>
                                    <td>
                                        <textarea 
                                          className="form-control" 
                                          placeholder="Say something..." >
                                          </textarea>
                                    </td>
                                    <td>
                                        <textarea 
                                          className="form-control" 
                                          placeholder="Say Comment..." >
                                          </textarea>
                                    </td>
                                    <td>
                                        <select className="form-control">
                                            <option value="">Option</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                        </select>
                                    </td>
                                    <td>
                                        <input 
                                            type="submit" 
                                            className="btn btn-default addButton" 
                                            value="Add" />
                                    </td>
                                </tr>
                              </table>
                              </form>
                    );
                  }
            });

            var BasicTask = React.createClass({

                render: function() {
                  return (

                    <div className="downloadlinks">
                           <Tableforbasictask />
                    </div>

                  );
                }
            });

            var AttributeTask = React.createClass({

                render: function() {
                  return (

                    <div className="downloadlinks">
                           Hello I am an Attribute Component
                    </div>

                  );
                }

            });

        ReactDOM.render(<div><BasicTask /><AttributeTask /></div>, document.getElementById('content'));

      </script>
</div>

I want to add a new row when I click on the Add button with the similar content .

Can any one help or instruct how to do that

Here is the JS Fiddle for it

LINKTOFIDDLE

Thanks

I have following code

 <div id="content"></div>

      <script type="text/babel">

      var Tableforbasictask = React.createClass({

              render: function() {

                    return (
                              <form  class="table-responsive" onSubmit={this.handleSubmit}>

                               <table className="table table-bordered table-striped-col nomargin" id="table-data">
                                    <tr align="center">
                                        <td>Task  Name</td>
                                        <td>Standard Discription of Task</td>
                                        <td>Employee Comment</td>
                                        <td>Employee rating</td>
                                    </tr>

                                <tr>
                                    <td>
                                        <input
                                          className="form-control"
                                          type="text"
                                          placeholder="Your Taks Name"
                                        />
                                    </td>
                                    <td>
                                        <textarea 
                                          className="form-control" 
                                          placeholder="Say something..." >
                                          </textarea>
                                    </td>
                                    <td>
                                        <textarea 
                                          className="form-control" 
                                          placeholder="Say Comment..." >
                                          </textarea>
                                    </td>
                                    <td>
                                        <select className="form-control">
                                            <option value="">Option</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                        </select>
                                    </td>
                                    <td>
                                        <input 
                                            type="submit" 
                                            className="btn btn-default addButton" 
                                            value="Add" />
                                    </td>
                                </tr>
                              </table>
                              </form>
                    );
                  }
            });

            var BasicTask = React.createClass({

                render: function() {
                  return (

                    <div className="downloadlinks">
                           <Tableforbasictask />
                    </div>

                  );
                }
            });

            var AttributeTask = React.createClass({

                render: function() {
                  return (

                    <div className="downloadlinks">
                           Hello I am an Attribute Component
                    </div>

                  );
                }

            });

        ReactDOM.render(<div><BasicTask /><AttributeTask /></div>, document.getElementById('content'));

      </script>
</div>

I want to add a new row when I click on the Add button with the similar content .

Can any one help or instruct how to do that

Here is the JS Fiddle for it

LINKTOFIDDLE

Thanks

• javascript
• reactjs

• 1 You'll have to use React state to manage the rows. Take a look at tutorials of React online, such as todo list. – Yuya Commented May 4, 2016 at 13:41

2 Answers 2

Like mentioned in the ment above you need to manage the state of rows somewhere:

Below is an example of a list ponent. When you click add button, it adds an element to the list and updates the state. This causes a re-render with an updated list.

class List extends React.Component {

   constructor() {
      this.state = {
         items: []
      }
   }

   add() {
      this.setState({ items.push(//some items)});
   }

   render() {

     let divItems = this.items.map( ( item, index ) => {
        return <div key={index}>{item.value}</div>
     });

     return (
       <div>
         {divItems}
         <button onClick={this.add}> Add </button>
       </div>
     );
   }
}

You'll need to restructure your code a bit to get this to work. Roughly, without context of the purpose of this chunk, here is how I would approach it:

1. Extract your table row <tr> and contents into a separate ponent.
2. Set up an array data structure containing at least one copy of your <tr> ponent. Assuming you are new to React you will probably leverage this.state to store this.
3. Setup Tableforbasictask to iterate over the array and output the ponents.
4. Lastly you will want to create a method that you bind to the button that will push a new copy of the ponent into the array.

Ultimately you would not want to store the ponents themselves in an array, preferring to have your data stored there, then loop over that data and render the ponents. For now, hopefully, this is enough work to lead you to a solution that does what you need.