在 React 中删除表数据 (td) 值后设置 state

Question

I have built a List.js component that stores all the appointments.

A list of all the appointments is displayed in a table and a button allows to delete an appointment and send an email as confirmation.

Each row will contain a student/counsellor email according to the user type. I would like to get that email when I delete a row (a <td> in <tr> ) and set the state to that email so I can send an email using the state as the recipient.

This is the component code (including just relevant bits - will update if needed):

// imports

export class Appointments extends Component {
  state = {
    email: "",
  };

  static propTypes = {
    // propsTypes...
  };

  componentDidMount() {
    // calling some async func
  }

  // other func

  getAppointmentEmail = (e) => {
    e.preventDefault();

    this.setState({ email: e.target.value });
    console.log(e.target.value);
  };

  deleteAppointmentEmail = (appointment) => {
    const { user } = this.props.auth;
    const message = "...";
    const email = {
      message,
      sender: "example@gmail.com",
      recipient: this.state.email,
    };
    console.log(email);
    // this.props.sendEmail(email);
  };

  render() {
    const { isCounselor } = this.props.clients;

    const studentHeader = <th>Student Contact</th>;
    const counselorHeader = <th>Counselor Contact</th>;

    return (
      <Fragment>
        <h4 className="text-center mt-3">Appointments</h4>
        <br />
        <table className="table table-striped mt-3">
          <thead>
            <tr>
              <th>Title</th>
              <th>Date</th>
              <th>Time</th>
              <th>Location</th>
              {isCounselor ? studentHeader : counselorHeader}
              <th />
            </tr>
          </thead>
          <tbody>
            {this.props.appointments.map((appointment) => (
              <tr key={appointment.id}>
                <td>{appointment.title}</td>
                <td>{appointment.date}</td>
                <td>{`${appointment.start_time.slice(0, 5)} -
                ${appointment.end_time.slice(0, 5)}`}</td>
                <td>{appointment.location}</td>
                <td name="email" value={this.state.email}>
                  {isCounselor
                    ? this.getStudentContact(appointment.student)
                    : this.getCounselorContact(appointment.counselor)}
                </td>
                <td>
                  <button
                    onClick={() => {
                      this.getAppointmentEmail;
                      this.props.deleteAppointment(appointment.id);
                      this.deleteAppointmentEmail(appointment);
                    }}
                    className="btn btn-danger"
                  >
                    {""}
                    Delete
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </Fragment>
    );
  }
}

const mapStateToProps = (state) => ({
  // ...
});

export default connect(mapStateToProps, { // ... })(Appointments);

I have tried to add value={this.state.email} / value={email} to the <td> but it is not working.

I am also wondering whether getAppointmentEmail has been built correctly and if calling it in the onClick of the delete button is correct?

Could you please advise? Thank you for your help, it is appreciated!

Answer 1

You can store the email contact in a variable:

this.props.appointments.map(appointment => {
     const email = isCounselor ? this.getStudentContact(appointment.student) : this.getCounselorContact(appointment.counselor);
     return (
            <tr key={appointment.id}>
               //code inside row ...
            </tr>
      );
  })

and then on Delete button:

<button
  onClick={() => {
    this.getAppointmentEmail(email); // pass email inside the function and then set it in state
    this.props.deleteAppointment(appointment.id);
    this.deleteAppointmentEmail(appointment);
  }}
  className="btn btn-danger"
>
  {""}
  Delete
</button>