Real-time map editing: Tips and methods to explore seatchart.js

Question

I'm trying to design a venue layout using seatchart.js, is it possible to have live editing on the seatchart option?

Suppose I want to change the number of rows and columns by editing the textbox, but I don't see any hooks or functions I can use to re-render the map layout.

This is my default option, I want to change the number of rows and columns.

const options = {
    map: {
      rows: 3,
      columns: 3,
      seatTypes: {
        default: {
          label: "Bronze",
          cssClass: "bronze",
          price: 80
        },
      },
      reserved: [],
      rowSpacers: [],
      columnSpacers: [],
      disabledSeats: [],
      reservedSeats: [],
    },
    cart: {
      visible: false
    },
  }

I created this form in React

Layout form

I expect the map to update after I change the number of rows/columns.

Any help would be greatly appreciated.

Answer 1

I changed my library to react-seat-picker, just add the key in the SeatPicker tag, like this

<SeatPicker
    key={randomKey}
...

And ensure that some random keys are always generated when the value is updated.