Reusing a React component with different props?

JavaScript
1

Hi, I have a question about reusing React components with different props.

Let’s say I have an app component which is rendering multiple comic components with the following code and props of title, pages, date, and addToFavorites() bound to a button:

COMIC COMPONENT
<div className="comic">
  <p>{this.props.title}</p>
  <p>{this.props.pages}</p>
  <p>{this.props.date}</p>
  <button onClick={() => this.props.addToFavorites(this.props.title)} />
    Add to Favorites
  </button>
</div>

Now let’s say I have a favorites component, where I am rendering a bunch of comic components but I want to change the button onClick to this.props.deleteFromFavorites(), how would I do this without modifying the original comic component? Also, how would I change elements in the new component, say I didn’t want a button in the new comic component rendered in favorites.

So the comic component I want rendering from favorites would be:

COMIC COMPONENT
<div className="comic">
  <p>{this.props.title}</p>
  <p>{this.props.pages}</p>
  <p>{this.props.date}</p>
  <button onClick={() => this.props.removeFromFavorites(this.props.title)} />
    Remote from Favorites
  </button>
</div>
2

Instead of directly using the functions in the props, you could create a generic onClick prop. I also made props for the button labels.

<div className="comic">
  ...
  <button onClick={() => this.props.onClick(this.props.title)}>
    {this.props.buttonLabel}
  </button>
</div>

Then you can create two comic components, but pass them different functions.

<Comic buttonLabel="Add to Favorites" onClick={addToFavorites} />
<Comic buttonLabel="Remove from Favorites" onClick={removeFromFavorites} />