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
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP