Programmatically adding components with React

Question

I'm fairly new to React and I'm trying to add new components to already exsisting, but I am not sure how to do that.

So here I have the list of my Seances and the button to add more:
SeanceManager.js

return (
  <MDBRow>
    <MDBCol md="6">
      <MDBCard>
        <MDBCardBody>
          <form>
            <p className="h4 text-center py-4">Sign up</p>
            <div className="grey-text">
              <MDBInput
                label="Type your email"
                icon="envelope"
                group
                type="email"
                validate
                error="wrong"
                success="right"
              />
              <MDBInput
                label="Type your password"
                icon="lock"
                group
                type="password"
                validate
              />
            </div>
            <div className="text-center py-4 mt-3">
              <MDBBtn color="cyan" type="submit" onClick={props.submitLogin}>
                Log in
              </MDBBtn>
            </div>
          </form>
        </MDBCardBody>
      </MDBCard>
    </MDBCol>
  </MDBRow>
);

By pressing the button to add more, a modal view pops up and at the end it has a submit button that should add the Seance.
AddSeanceModal.js

return (
  <Modal
    {...this.props}
    size="lg"
    aria-labelledby="contained-modal-title-vcenter"
    centered
  >
    <Modal.Header closeButton>
      <Modal.Title id="contained-modal-title-vcenter">Add Seance</Modal.Title>
    </Modal.Header>
    <Modal.Body>
      <div>
        <form>
          {/*First row*/}
          <MDBRow>
            <MDBCol md="4">
              <div className="custom-file">
                <input
                  type="file"
                  className="custom-file-input"
                  id="inputGroupFile01"
                  aria-describedby="inputGroupFileAddon01"
                />
                <label className="custom-file-label" htmlFor="inputGroupFile01">
                  Choose file
                </label>
              </div>
            </MDBCol>
          </MDBRow>

          {/*Second row*/}
          <MDBRow>
            <MDBCol md="4">
              <MDBInput
                onChange={this.changeHandler}
                type="text"
                id="materialFormRegisterPasswordEx4"
                name="algus_aeg"
                label="Algus Aeg"
                required
              />
            </MDBCol>
            <MDBCol md="4">
              <MDBInput
                onChange={this.changeHandler}
                type="text"
                id="materialFormRegisterPasswordEx4"
                name="lopp_aeg"
                label="Lõpp Aeg"
                required
              />
            </MDBCol>
          </MDBRow>

          {/*Third row*/}
          <MDBRow>
            <MDBCol md="4">
              <MDBInput
                onChange={this.changeHandler}
                type="text"
                id="materialFormRegisterPasswordEx4"
                name="aja_samm"
                label="Aja Samm"
                required
              />
            </MDBCol>
          </MDBRow>

          <Button variant="secondary" onClick={this.props.onHide}>
            Close
          </Button>
          <MDBBtn color="success" type="submit" className="float-right">
            Add Seance
          </MDBBtn>
        </form>
      </div>
    </Modal.Body>
  </Modal>
);

And finally the Seance itself:
Seance.js

return (
  <div
    className="card"
    style={{ marginBottom: "7px" }}
    onClick={() => this.setState({ modalShow: true })}
  >
    <div className="card-body">
      <h5 className="card-title">Seance nr: {this.props.id}</h5>
      <p className="card-text">Start aeg: {this.props.startDate}</p>
      <p className="card-text">End aeg: {this.props.endDate}</p>
      <button type="button" className="close float-right" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
      <ResultModal id={1} show={this.state.modalShow} onHide={modalClose} />
    </div>
  </div>
);

I also made a fiddle on sandbox: https://codesandbox.io/s/qloo1vqr7j?fontsize=14

At the moment I have 4 static Seances, but it should start with 0 and add more once you add them.
Also the Xon the Seance should remove it.

I have tried creating a list on state in SeanceManager.js, but I have not understoond how to add components to the list from another component AddSeanceModal.

Answer 1

There are quite a few code choices that are holding your application back from being dynamic.

First, you'll need to utilize a container component that handles all things related to Seance state. This includes, adding, removing and viewing. All of this needs to be handled by a parent that updates its children according to what current in its state. Please follow this guide to understand containers vs components.

Second, you need to refactor how you're utilizing Seances. They need to be stored as an array within the parent's state. As you have it now, it's hard-coded with 4 <Seances /> that can't be removed/updated.

Instead, you should create an array of objects like so within state:

seances: [
  { id: "1", startDate: "2019-04-10 10:28:05.926-07", endDate: "2019-05-10 10:28:05.924-07" },
  { id: "2", startDate: "2019-04-11 11:28:05.926-07", endDate: "2019-05-11 11:28:05.924-07" },
  { id: "3", startDate: "2019-04-12 12:28:05.926-07", endDate: "2019-05-12 12:28:05.924-07" },
  ...etc
];

You'll utilize Array.map to map over this seances array and implicitly return these seances dynamically (to make easier to read, I'm writing your <Seance id={id} /> component inline):

<div>
  {seances.map(({ id, startDate, endDate }) => (
    <div key={id}>
     <h1>Seance nr: {id} </h1>
     <p>Start date: {startDate}</p>
     <p>End date: {endDate}</p>
     <button type="button" onClick={() => handleDeleteSeance(id)}>X</button>
    </div>
  ))}
</div>

Now you'll remove these items from the seances array by utilizing Array.filter by a seance's id property. When a user clicks the "X" button it calls this.handleDeleteSeance with the specific seance id:

handleDeleteSeance = id => {
  this.setState(prevState => ({
    ...prevState, // spread out any previous state not related to "seances"
    seances: prevState.seances.filter(seance => seance.id !== id) // this translates to: compare each "seance" within "seances" and implicitly return any that do NOT match the "id" that was clicked
  })
};

To add an item to the seances array, you'll utilize the spread operator, and add an object with properties that were collected from a form:

handleSubmit = e => {
  e.preventDefault();
  const { id, startDate, endDate } = this.state;

  if (!id || !startDate || !endDate } return null; // if any properties are missing, don't add an item yet

  this.setState(prevState => ({
    ...prevState, // spread out any previous state not related to "seances"
    seances: [...prevState.seances, { id, startDate, endDate } ] // this translates to: spread out any previous seances and add a new object with "id", "startDate" and "endDate"
  });  
} 

---

Working with arrays example (since this a client-only implementation, I decided to filter by array position so I don't have to have to deal with generating unique ids; however, you can utilize uuid to generate these dynamic ids if you wish):

---

Other notes:

• One of your components contains a let modalClose = () => this.setState({ modalShow: false }); within the render method. This is invalid and should be defined as a class method.
• Structure your components to be reusable. You have some components that are, but then you have some that reside within another component (like FileInput). As your application grows, you may need to use FileInput elsewhere for another form.
• Utilize ES6 syntax throughout your project to simplify your code. For example you can deconstruct props for your Login component like so: const Login = ({ submitLogin }) => ( <MDBRow>...etc</MDBRow>);.