Assigning form value from values within an array

Question

I have a table that has an edit button next to each row. I send the persons id to the form component and get their data from the DB using the id. I assign it to patient. I then want to use the data to autofill a form.

Here is the top of the file.

class PtEditForm extends React.Component {
  constructor(props) {
    super(props);

    //console.log(this.props.location.search);
    const query = queryString.parse(this.props.location.search);
    console.log(query.patientId);

    this.state = {
      ptId: query.patientId || null,
      patient: null
    };

Here is the fetch that I confirm works when I log it.

  getPatient() {
    fetch("https://localhost:5001/api/PtEditPg/" + this.state.ptId)
      .then(response => response.json())
      .then(data => this.setState({ patient: data }));
  }

Here is the one of the forms showing what I have attempted

              <label htmlFor="firstName">First Name</label>
              <input
                type="Name"
                className="form-control"
                id="firstName"
                name="firstName"
                placeholder="First Name"
                value={this.state.patient.firstName}
                onChange={this.handleChange}
              />

Answer 1

I finally figured it out. The object was an array I think?

This is what worked

this.state.patient[0].firstName