showing html in the browser but not the textbox

Question

update1: updated image for better understanding

I am trying to implement chip filters similar to googleflights. Right now when you select sports it will show sports1 it will replace sports by sports1.

However, I wanted to insert a textbox, when I enter somevalue in the textbox and hit Enter the primary fee schedule value should change to the entered value.

Can you tell me how to fix it?

chip related code is in chip-selector and tab-demo since if I enter textbox tag. I am just getting string

code snippet and sandbox

const primaryFeeMenuItems = [
   "primaryFeeMenuItems1",
   "<input type=\"text\" name=\"fname\">",
   "primaryFeeMenuItems2",
   "primaryFeeMenuItems3"
];

<td>
   <SimpleMenu
        buttonName="Primary Fee Schedule"
        menuItems={primaryFeeMenuItems}
   />
</td>
handleDelete() {
    this.setState({ display: !this.state.display });
 }

handleClick = event => {
    console.log("handle Click");
    this.setState({ anchorEl: event.currentTarget });
};

handleClose = e => {
    console.log(e.menuItem);
    if (e.menuItem) {
      this.setState({ display: !this.state.display });
      this.setState({ chipName: e.menuItem });
    }
    this.setState({ anchorEl: null });
};

Answer 1

You are using Menu which works a little differently than what you are trying to achieve. Actually looking into how Google Flights is using these filters, it seems like they are using Chips and Dialog components to produce that result. Once you use a Dialog component, you can define the content yourself.

I have created a sandbox here

I converted your code to take Dialog instead of Menu.

<div>
        <Chip
          style={{ display: this.state.display ? "" : "none" }}
          label={this.state.chipName}
          onDelete={this.handleDelete}
          className={this.props.classes.chip}
          color="primary"
        />

        <Button
          style={{ display: this.state.display ? "none" : "" }}
          aria-owns={anchorEl ? "simple-menu" : undefined}
          aria-haspopup="true"
          onClick={this.handleClick}
        >
          {this.props.buttonName}
        </Button>

        <Dialog
          onClose={this.handleClose}
          aria-labelledby="simple-dialog-title"
          open={this.state.openDialog}
        >
          <DialogTitle id="simple-dialog-title" style={titleStyle}>
            Set backup account
          </DialogTitle>
          <div>
            <input type="text" placeHolder="type here" />
            <List>{menuItems}</List>
          </div>
        </Dialog>
      </div>

menuItems returns ListItem instead of MenuItems. Find the full code in the sandbox.

The input you are trying to get should be before the List. You can handle that any way you want.

I haven't overridden the CSS properties for Dialog. So, once you override the backdrop background color and position of the dialog, you should achieve the display as well.