How can I use the same component for similar, but different purpose?

Stack Overflow Asked by mts0040 on January 3, 2022

I have a three components total: WorkoutOrganizer, Exercise, and ExerciseList. The last two are children of WorkoutOrganizer, where Exercise is only viewable if a button is pressed to toggle a view. Here is a link for the code, with it also pasted below.

When I press ‘Add Exercise’ the Exercise component will become visible so I can enter the details of the exercise, and the callback add() should add the exercise to list after I close the pop up. When I click on the button, it should then toggle and show the Exercise component with the details of exercise I clicked on.

My trouble is that I’m not sure how to differentiate when a new exercise is being added or if I’m looking at the details of an existing one in the list. If I click on an existing exercise in the list, and then close the pop up, I don’t want to add a new exercise, just toggle the pop up. In both cases the Exercise component becomes visible, but the ‘Add Exercise’ button has a callback of add() and the buttons in the list have a callback of togglePopUp()

I suppose I could create another component very similar to Exercise, but that seems very redundant

export default class WorkoutOrganizer extends React.Component {
  constructor(props) {
    this.state = {
      list: [],
      showPopUp: false,
      primary: ""

  add(element) {
    const list = this.state.lList.slice();
    const newList = list.concat(element);
    const prevPopUp = this.state.showPopUp;

      exerciseList: newList,
      showExercisePopUp: prevPopUp,
      primary: ""

 togglePopUp(event = undefined) {
    const details = !this.state.showPopUp ? : "";
    this.setState(prevState => ({
      exerciseList: prevState.lList,
      showPopUp: !prevState.showPopUp,
      primary: details
 render() {
    return (
          add={element => this.add(element)}
        {this.state.showPopUp ? (
        ) : null}

This is where the the adding to the list and toggling happen.

export default class ExerciseList extends React.Component {
  render() {
    const list = this.props.list;
    const buttons = => {
      return (
        <li key={i}>
          <button onClick={} value={}>

    return (
      <div className="exercises">
        <button onClick={}>Add Exercise</button>

This is where the buttons are created

export default class Exercise extends React.Component {
  render() {
    return (
      <div className={ ? "fadeIn" : "fadeOut"}>
        <div className="modal_content">
              placeholder="Exercise Name"

            <button onClick={this.props.close}>Close</button>

And this is the popup displayed when the ‘Add Exercise’ button or an exercise button is pressed

Add your own answers!

Related Questions

form validation with data ranges

2  Asked on August 7, 2020 by eniol


How to format this output?

2  Asked on August 6, 2020 by shantanu-jain


uploading csv file django using a form

2  Asked on August 5, 2020 by sheraram_prajapat


Set focus to another Control

3  Asked on August 4, 2020 by binu


Animate gradient bar chart – matplotlib

1  Asked on August 4, 2020 by jonboy


c# error – Can not convert Array to byte array

1  Asked on August 2, 2020 by rakesh


Correcting Business name misspellings

1  Asked on August 2, 2020 by jonathan-rauscher


How to cut a string to the first “/” from right to left c# .net

1  Asked on August 1, 2020 by ignacio-gomez


Inserting random data from a list

2  Asked on August 1, 2020 by smiley


Invalid token SELECT

2  Asked on July 31, 2020 by virendra-varma


Django – No column found for custom field?

0  Asked on July 29, 2020 by jare42


Ask a Question

Get help from others!

© 2023 All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP