Creating Multiple Instances Of A Complex React Component

Question

I am currently struggling to come up with an elegant solution for the following feature that needs to be built:

enter image description here

For our purposes, lets call this feature, "Create Program". Create Program needs to have the ability to create multiple instances of what I call a "Program" Component. Not only does it need to do this, but inside each "Program", there is also the ability to create multiple instances of what I will call an "Exercise" Component.

enter image description here

Here are the following pieces of a single Program instance broken down:

- Date Range Picker
- Number Increment/Decrement Input Field
- Day Picker
- Exercise (Multiple instances can be spawned within the Program instance)
 - Everything else inside of exercise is self explanatory...

I have started to conceptualize the data structure I might need in order to attain this. My thought is that some type of Higher Order Component would be utilized to obtain all of the state in some type of object or array. Below, I have created an example in object form, with each key representing a program instance.

// A master object that contains the state for all of the program instances that are currently on the screen
{
 // A single program 
 0: {
 dateStart: ''
 dateEnd: '',
 sessionsPerDay: 0
 daysOfTheWeek: [],
 exercises: [
 // A single exercise
 {
 }
 ]
 },
 1: {
 dateStart: ''
 dateEnd: '',
 sessionsPerDay: 0
 daysOfTheWeek: [],
 exercises: [
 // A single exercise
 {
 ...
 }
 ]
 }
}

I feel like I am struggling with the high level planning of how to do this in a clean, efficient manner. I was hoping to get a well thought out answer from someone explaining how they would approach solving this problem, and what specific features of React they would use to do so. (Higher Order Components, Render Props, Context etc...)

Bonus points if you could detail the component hiearchy you might create for this.

PS. If its not apparent right away, clicking the Add Program button will produce a a brand new Program Component to the screen. Theres currently not a limit to how many can be created.

• Axnyff: I don't see how it seems that complicated, I would just use plain react component and maybe Redux / Mobx if state management gets out of hand but it does not seem that complicated to me
• Dan Zuzevich: Well, its complicated to me, that is why I asked the question
• Markus: But you are not asking a specific question. Have your master object and pass the entries as props to your Program components. Very misleading name though for a component.
• Dan Zuzevich: I agree with you. Perhaps I should rename it, thats a very bland name.

Answer 1

Couldn't something like that work?

class Program extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 exercise: []
 };
 this.createExercise = this.createExercise.bind(this);
 }
 createExercise() {
 const data = this.props.data;
 const newExercises = [...data.exercises, { data: {} }];
 this.props.updateProgram(this.props.index, {
 ...data,
 exercises: newExercises
 });
 }
 render() {
 return (
 <div>
 {JSON.stringify(this.props.data)}
 {this.props.data.exercises.map(exercise => <span>Exercise</span>)}
 <button onClick={this.createExercise}>Create exercise</button>
 </div>
 );
 }
}
class App extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 programs: []
 };
 this.createProgram = this.createProgram.bind(this);
 this.updateProgram = this.updateProgram.bind(this);
 }
 createProgram() {
 const programs = [
 ...this.state.programs,
 { data: { exercises: [] }, key: Math.random() }
 ];
 this.setState({ programs });
 }
 updateProgram(key, newData) {
 const programs = this.state.programs.map(program => {
 if (key === program.key) {
 return { key, data: newData };
 }
 return program;
 });
 this.setState({ programs });
 }
 render() {
 return (
 <div>
 Programs:
 {this.state.programs.map(program => (
 <Program
 index={program.key}
 key={program.key}
 data={program.data}
 updateProgram={this.updateProgram}
 />
 ))}
 <button onClick={this.createProgram}>Create program</button>
 </div>
 );
 }
}

You don't need anything fancy. If it gets out of hand, then you could use a state management solution to improve it but other than that, I don't see a use for anything fancy

• Dan Zuzevich: Checking this out now
• Dan Zuzevich: Each Program Component also needs to hold state for a datepicker, a number increment/decrement button, as well as a days of the week component that is clickable. Exercises is not the only value that needs to be stored in state.
• Dan Zuzevich: Just letting you know there are some typos. Exercise is the correct spelling for the word, not "exercice". Just might be confusing for people in the future who might read this. Thanks a lot for the help.
• Axnyff: Sorry, it's the correct spelling in my native language. I edited to fix it
• Dan Zuzevich: This was instrumental to my success in building this out properly. Thanks a ton for the help, I would not have figured it out in time. I did some things differently, but it allowed me to grasp at a high level of what I needed to do.