Map a ListItem using ReactJS and Map function

Question

I've tried this several ways but i cant seem to get rid of this error: Expected onClick listener to be a function, instead got type string

i have a function that returns a Panel Div. The function works fine and renders in the browser with no issue but there is still an error complaining about my button click method.

I am simply mapping the state and returning it to my output

this.setState({divs: [...this.state.divs, {title: this.state.newTitle,
description: this.state.newDescription, time: timeNow, date: dateNow}]});

Then In my method i create an array out of the state object.

  renderTheDiv = () => {

     var panelMap = [div];

     const newGeneratedPanel = panelMap.map((data, x) => 
          <div id="newpanel" className="panel" key={x}>
          <label>Created:&nbsp;</label>
          <span className="date">{data.date}</span> at 
          <span className="date">{data.time}</span>
          <div className="itemTitle">{data.title}</div>
            <br/>
          <div className="itemDescription">{data.description}</div>
          <button type="button" 
            className="editButton btn btn-default">Edit</button>&nbsp;
          <button type="button" className="deleteButton btn btn-danger"
            onClick={this.delete()}>Delete</button>
          <div id="updated"></div></div>);

      return newGeneratedPanel;

  }

I've tried to return it using:

return newGeneratedPanel;

And this is the error:

and also

return (<div>{newGeneratedPanel}</div>); // this one generates an 
      error complaining about needing a key even though it is clearly set

And this is the error:

I call it in my render function using: {this.state.divs.map(this.renderDivs)}

The panel div displays with no issue and works fine but the error still persists in my console. I prefer not to ignore it. I'm hoping someone on Stack can help me identify how to get rid of this error even though its working fine with both returned methods.

Any help with this would be greatly appreciated, I have tried various ways to rid the error and to no avail I've gotten no where.

Answer 1

1. in your code the onClick handler should be a function, in your case its the return value this.delete(). Remove the parentheses. ... onClick={this.delete}

2. Where is the this.renderDivs function?