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

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) {
    super(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;

    this.setState({
      exerciseList: newList,
      showExercisePopUp: prevPopUp,
      primary: ""
    });
  }

 togglePopUp(event = undefined) {
    const details = !this.state.showPopUp ? event.target.value : "";
    this.setState(prevState => ({
      exerciseList: prevState.lList,
      showPopUp: !prevState.showPopUp,
      primary: details
    }));
  }
  
 render() {
    return (
      <div>
        <ExerciseList
          list={this.state.list}
          add={element => this.add(element)}
          open={this.togglePopUp}
        />
        {this.state.showPopUp ? (
          <Exercise
            details={this.state.primary}
            close={this.togglePopUp}
            show={this.state.showPopUp}
          />
        ) : null}
      </div>
    );
  }
}

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 = list.map(i => {
      return (
        <li key={i}>
          <button onClick={this.props.open} value={i.name}>
            {i}
          </button>
        </li>
      );
    });

    return (
      <div className="exercises">
        <button onClick={this.props.open}>Add Exercise</button>
        <ul>{buttons}</ul>
      </div>
    );
  }
}

This is where the buttons are created

export default class Exercise extends React.Component {
  render() {
    return (
      <div className={this.props.show ? "fadeIn" : "fadeOut"}>
        <div className="modal_content">
          <form>
            <input
              className="exercise_title"
              type="text"
              placeholder="Exercise Name"
              value={this.props.details.name}
              onChange={this.handleChange}
            />
            <input
              type="number"
              placeholder="Weight"
              value={this.props.details.weight}
              onChange={this.handleChange}
            />

            <button onClick={this.props.close}>Close</button>
          </form>
        </div>
      </div>
    );
  }
}

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