Vikram Vikram - 2 years ago 93
Javascript Question

How to append to a table in ReactJs

I have following code

var data = [{
id: 1,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}, {
id: 2,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}, {
id: 3,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}, {
id: 4,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}, {
id: 5,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}];



var TableforbasictaskForm = React.createClass({

getInitialState: function() {
return {
taskName: '',
description: '',
empComment: '',
emprating: ''
};
},
handletaskNameChange: function(e) {
this.setState({
taskName: e.target.value
});
},
handledescriptionChange: function(e) {
this.setState({
description: e.target.value
});
},
handleempCommentChange: function(e) {
this.setState({
empComment: e.target.value
});
},
handleempratingChange: function(e) {
this.setState({
emprating: e.target.value
});
},

handleSubmit: function(e) {
e.preventDefault();

var taskName = this.state.taskName.trim();
var description = this.state.description.trim();
var empComment = this.state.empComment.trim();
var emprating = this.state.emprating;

if (!taskName || !description || !empComment || !emprating) {
alert('all the field have to be field');
return;
}

this.props.onCommentSubmit({
taskName: taskName,
description: description,
empComment: empComment,
emprating: emprating
});

this.setState({
taskName: '',
description: '',
empComment: '',
emprating: ''
});
},

render: function() {
return ( < div className = "row margin-bottom" >
< form className = "col-md-12"
onSubmit = {
this.handleSubmit
} >
< div className = "col-md-2" >
< input className = "form-control "
type = "text"
placeholder = "Task name"
value = {
this.state.taskName
}
onChange = {
this.handletaskNameChange
}
/> < /div> < div className = "col-md-3" >
< textarea className = "form-control"
name = "description"
placeholder = "Standard Discription of task"
value = {
this.state.description
}
onChange = {
this.handledescriptionChange
}
/> < /div> < div className = "col-md-3" >
< textarea className = "form-control"
name = "empComment"
placeholder = "Employee Comment"
value = {
this.state.empComment
}
onChange = {
this.handleempCommentChange
}
/> < /div>

< div className = "col-md-2" >
< select className = "form-control"
name = "emprating"
value = {
this.state.emprating
}
onChange = {
this.handleempratingChange
} >
< option value = "" > Employee Ratings < /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> < /div> < div className = "col-md-2" >
< input className = "form-control"
type = "submit"
value = "Post" / >
< /div> < /form> < /div>
);
}
});

var Addcontenttotable = React.createClass({
render: function() {
return ( < tr > < td > {
this.props.taskName
} < /td> < td > {
this.props.standarDescription
} < /td> < td > {
this.props.emplComment
} < /td> < td > {
this.props.empRating
} < /td> < /tr>);
}
});

var TableforbasictaskList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment) {
return ( < Addcontenttotable taskName = {
comment.taskName
}
standarDescription = {
comment.standarDescription
}
emplComment = {
comment.emplComment
}
empRating = {
comment.empRating
}
key = {
comment.id
} >
< /Addcontenttotable>
);
});
return ( < tbody > {
commentNodes
} < /tbody>);
}
});

var Tableforbasictask = React.createClass({
render: function() {
return ( < div className = "downloadlinks" >
< table className = "table table-bordered table-striped-col nomargin"
id = "table-data" >
< thead >
< tr align = "center" >
< td > Task Name < /td> < td > Standard Discription of Task < /td> < td > Employee Comment < /td> < td > Employee rating < /td> < /tr> < /thead>

< TableforbasictaskList data = {
this.props.data
}
/> < /table> < TableforbasictaskForm / >
< /div>
);
}
});
ReactDOM.render( < div className="row"> < Tableforbasictask data = {
data
}
/></div > , document.getElementById('content'));


I would Like to add new row to the Table when ever the form is submitted .

Here is a FIDDLE LINK

Answer Source

I have updated your code here to make it work

var Tableforbasictask = React.createClass({
  getInitialState: function() {
    return {data:this.props.data};
  },
  handleSubmit: function(comment){
    comment.id=this.state.data.length+1;
    this.setState({data:this.state.data.concat(comment)});
  },
  render: function() {
    return ( < div className = "downloadlinks" >
      < table className = "table table-bordered table-striped-col nomargin"
      id = "table-data" >
      < thead >
      < tr align = "center" >
      < td > Task Name < /td> < td > Standard Discription of Task < /td> < td > Employee Comment < /td> < td > Employee rating < /td> < /tr> < /thead>

      < TableforbasictaskList data = {
        this.state.data
      }
      />  < /table> < TableforbasictaskForm onCommentSubmit={this.handleSubmit} / >
      < /div>
    );
  }
});

The basic idea is the Tableforbasictask component to have a state which is passed to it as props.data The component will pass its internal method handleSubmit to TableforbasictaskForm as props.onCommentSubmit which will update Tableforbasictask's state with new comment.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download