itsclarke itsclarke - 1 year ago 146
React JSX Question

Cannot convert a Symbol value to a string - React AJAX delete request

I can't figure out why this is throwing

Cannot convert a Symbol value to a string
in the console. I'm using React v15 and jQuery v3.

enter image description here

Here's my React code:

var CommentList = React.createClass({
handleDelete: function(comment) {
url: this.props.url,
dataType: 'json',
type: 'DELETE',
data: comment,
dataType: 'text',
success: function(data) {
this.setState({ data: data });
error: function(xhr, status, err) {
this.setState({data: comments});
console.error(this.props.url, status, err.toString());
render: function() {
var commentNodes = => {
<div key= { }>
<Comment author = { }>
{ comment.text }
<button onClick={this.handleDelete}>delete</button>
return (
<div className="commentList">

The json file looks like:

"id": 1388534400000,
"author": "Pete Hunt",
"text": "Hey there!"
"id": 1323434400000,
"author": "Ben Jerry",
"text": "I did a thing"

Answer Source

You aren't passing the comment to handleDelete, it is actually receiving the click event instead. You could probably get away with just using the comment id. Try this for the list renderer:

<div key= {}>
  <Comment author ={}>
  <button onClick={this.handleDelete.bind(this, comment)}>delete</button>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download