Vikram Vikram - 6 months ago 13
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

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.

Comments