How can I put these object data to the mui-datatable?

Question

I have these doses object from the firestore.

I can already display all of the data excluding the object doses

class Users extends Component {
  constructor() {
    super();
    this.state = { users: [] };
  }

  columns = [
    "Name",
    "Address",
    "Vaccine",
  ];


  componentDidMount() {
    firestore
      .collection("users")
      .get()
      .then((snapshot) => {
        const users = [];
        snapshot.forEach((doc) => {
          const data = doc.data();
          console.log("doses", data.doses);
             doc.data().doses.forEach((index) => {
        console.log(index.selectedVaccine);
      });
      
          users.push({
            ...((data.firstName && data.lastName) || data.middleName == " "
              ? {
                  Name:
                    data.firstName +
                    " " +
                    data.middleName +
                    "." +
                    data.lastName,
                }
              : {}),
            Email: data.email,
            Address: data.address,
          });
        });
        this.setState({ users: users });
        // console.log(snapshot)
      })
      .catch((error) => console.log(error));
  }

  render() {
    return this.state.users ? (
      <MUIDataTable
        title={"List of Users"}
        columns={this.columns}
        data={this.state.users}
        options={this.options}
      />
    ) : (
      <div>Loading...</div>
    );
  }
}

export default Users;

When I console.log("doses", data.doses); I can view all of the users' doses data but I cannot display it in the table. When I tried this part of the code, this would result to "no matching data" inside the mui-datatable:

   doc.data().doses.forEach((index) => {
            console.log(index.selectedVaccine);
          });
          

How can I display those doses inside the mui-datatable?

Update: the error is still the same, it says "Sorry, no matching records found" inside the mui-datatable.

columns = ["Name", "Email", "Phone Number", "Address", "Vaccine"];

componentDidMount() {
    firestore
      .collection("users")
      .get()
      .then((snapshot) => {
        const users = [];
        snapshot.forEach((doc) => {
          const data = doc.data();
          console.log("doses", data.doses);
          users.push({
            ...((data.firstName && data.lastName) || data.middleName == " "
              ? {
                  Name:
                    data.firstName +
                    " " +
                    data.middleName +
                    "." +
                    data.lastName,
                }
              : {}),

            Email: data.email,
            "Phone Number": data.phoneNumber,
            Address: data.address,
            Vaccine: data.doses.selectedVaccine,
          });
        });
        this.setState({ users: users });
      })
      .catch((error) => console.log(error));
  }

This is the error:

Answer 1

You can add the columns to the columns array for the doses and you can add the data for the doses in the users array.

Check out the code samples below:

columns = [
    "Name",
    "Address",
    "Dose 1",
    "Dose 2",
    "First Dose",
    "First Vaccinator",
    "Dose ID"
];

users.push({
    ...((data.firstName && data.lastName) || data.middleName == " " ? {
        Name: data.firstName +
            " " +
            data.middleName +
            "." +
            data.lastName,
    } : {}),
    "Address": data.address,
    "Dose 1": data.doses.dose1,
    "Dose 2": data.doses.dose2,
    "First Dose": data.doses.firstDose,
    "First Vaccinator": data.doses.firstVaccinator,
    "Dose ID": data.doses.id
});

Also, it looks like you're getting the "no matching data" error because you have "Vaccine" in your columns array but you don't have it in your users array and you have "Email" in your users array but you don't have it in your columns array.