How to insert a new Item in List view in ReactJS

Question

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

Answer 1

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

Below is an example of a list component. 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>
     );
   }
}

Answer 2

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 component.
2. Set up an array data structure containing at least one copy of your <tr> component. 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 components.
4. Lastly you will want to create a method that you bind to the button that will push a new copy of the component into the array.

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