Props passed to functional component change automatically?

Question

I am working on an experimental project and I was trying playing around with javascript when I encountered this weird thing that I have no explanation for its behavior.I am using bootstrap 4 with CDN. SandboxCode

import React from 'react';

const Button = props => {
  const showProps = e => {
    e.preventDefault();
    console.log(props.day, props.slot);
  };

  return (
    <div>
      <div data-toggle="modal" data-target="#myModal">
        Click Me!
      </div>

      <div className="modal fade" id="myModal">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h4 className="modal-title">Add / Edit Slot</h4>
              <button type="button" className="close" data-dismiss="modal">
                &times;
              </button>
            </div>

            <div className="modal-body">
              <form>
                <div className="form-group">
                  <label>
                    <h6>Faculty</h6>
                  </label>
                </div>
                <div className="form-group">
                  <label>
                    <h6>Venue</h6>
                  </label>
                </div>
                <div className="form-group">
                  <label>
                    <h6>Subject</h6>
                  </label>
                </div>
                <button
                  type="submit"
                  className="btn btn-success btn-cons btn-block"
                  onClick={showProps}
                >
                  Save
                </button>
              </form>
            </div>

            <div className="modal-footer">
              <button
                type="button"
                className="btn btn-danger btn-block"
                data-dismiss="modal"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Button;

this component provides a button which opens a modal when the Save button is clicked inside the modal then it console's two props (day and slot).

Its parent component is the main component which is then used In the App.js file to be rendered.

import React, { Component } from "react";
import Button from "./Button/Button";

export default class Main extends Component {
  render() {
    return ["Monday", "Tuesday"].map((day, dayIndex) => {
      return [0, 1].map((slot, slotIndex) => {
        return (
          <Button key={dayIndex + "-" + slotIndex} day={day} slot={slotIndex} />
        );
      });
    });
  }
}

Excepted Result:- Upon clicking the button and clicking the save button in modal, each button should console different data depending on props.

Output:- All the save button clicks output the same thing. I have been stuck on this for two days now and I have tried a lot of things.

Answer 1

Its an id issue :). Look at the below code:

<div data-toggle="modal" data-target="#myModal">

Make the id unique for every modal, otherwise no matter which button you click, it will bring up the modal for the first element it finds with the given id.

See the fixed code in this sandbox, basically changed these two lines to ensure a unique modal id:

<div data-toggle="modal" data-target={`#myModal_${props.day}_${props.slot}`}>

And

<div className="modal fade" id={`myModal_${props.day}_${props.slot}`}>