AnswerBun.com

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) {
    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

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 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP