React Help with Put Method on Bootstrap Modal

I have a flashcard project I am building with React and Bootstrap. I am using json-server to simulate that my json-file is on another server.
(Project on localhost:3000, data.json file on localhost:3001).

The front-side of the card reads a title while the back reads the rest of the material from each object. I am originally pulling the data using fetch, but I am using Axios to Post and Delete cards. The one that's tripping me up is the put method.

Right now, I have a button per card that says "update" which opens a Bootstrap modal. I can't for the life of me figure out how to pass the id to the modal based on which update button is clicked. Then I want to populate the modal fields with the existing data.

Original Call to the json file

componentDidMount() {
      let url = "http://localhost:3001/collections"
      fetch(url)
      .then(response => response.json())
      .then(data => {
        console.log(this.state.collections)
          let collections = data.map((collection) => {
              return (
                <div key={collection.id}>
                  <div className="cards">
                      <div className="cards-inner">
                          <div className="card-front">
                              <h3>{collection.title}</h3>
                          </div>
                          <div className="card-back">
                              <div>
                                  {collection.cards.map((words) =>
                                  <div key={words.id}>
                                      <h4>{words.word}</h4>
                                      <p>{words.definition}</p>
                                  </div>
                                  )}
                              </div>
                          </div>
                      </div> 

                  </div>
                  **<button className="btn btn-primary"  data-toggle="modal" data-target="#putCard">
                    Update Card
                  </button>**

                  <button className="btn btn-primary" 
                    onClick={() => this.deleteCollection(collection.id)}>
                    Delete Card
                  </button>
                </div>
              )
          });
          this.setState({collections: collections});
      });
  }

Modal

<div className="modal fade" id="putCard" tabIndex="-1" role="dialog" aria-labelledby="putCardlLabel" aria-hidden="true">
            <div className="modal-dialog" role="document">
              <div className="modal-content">
                <div className="modal-header">
                  <h5 className="modal-title" id="putCardlLabel">Update Card</h5>
                  <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>

                <div className="modal-body">
                  <ModalPutCard />
                </div>

                <div className="modal-footer">
                  <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>

Here is the form inside the ModalPutCard

render(props) {
        return (
        <form onSubmit={this.handleSubmit}>
            <div className="form-group" id={this.state.value}>
                <label htmlFor="cardTitle">Title:</label>
                <input type="text" className="form-control" name="title" id="cardTitle" aria-describedby="text" onChange={this.handleChange} value={this.state.title} />
                <label htmlFor="cardState">State:</label>
                <input type="text" className="form-control" name="cardState1" id="cardState1" aria-describedby="text" onChange={this.handleChange} />
                <label htmlFor="cardComponent">Component:</label>
                <input type="text" className="form-control" name="cardComponent1" id="cardComponent1" aria-describedby="text" onChange={this.handleChange} />
                <hr></hr>
                <label htmlFor="cardState">State:</label>
                <input type="text" className="form-control" name="cardState2" id="cardState2" aria-describedby="text" onChange={this.handleChange} />
                <label htmlFor="cardComponent">Component:</label>
                <input type="text" className="form-control" name="cardComponent2" id="cardComponent2" aria-describedby="text" onChange={this.handleChange} />
                <hr></hr>
                <label htmlFor="cardState">State:</label>
                <input type="text" className="form-control" name="cardState3" id="cardState3" aria-describedby="text" onChange={this.handleChange} />
                <label htmlFor="cardComponent">Component:</label>
                <input type="text" className="form-control" name="cardComponent3" id="cardComponent3" aria-describedby="text" onChange={this.handleChange} />
            </div>
            <button type="submit" className="btn btn-primary">Submit</button>
        </form>
        );
    }

I would think it would be is simple as this.state.title, or maybe this.props.title (Or whatever one I'm working on), however, I always get an undefined, which makes me think I'm never passing the id to the modal in order to display the values.

Can I use the regular Bootstrap Modal?
Is this even possible?

Any help or hints would be awesome.
I also read through the components and state section of the React docs, trying to do it without Hooks at this point.

Here is my github: Github