I use bootstrap Dropdown in React.js and I want to delete red circle area(Toggle) and show pencil icon only which use can click it.

enter image description here

I use the following Dropdown.

https://react-bootstrap.github.io/components/dropdowns/

React.js

  return (
    <>
        <div className="">
        
        <Dropdown className="room_change_dropdown_top">
          <Dropdown.Toggle className='room_change_dropdown_toggle' id="dropdown-basic">
          <img className="ic_edit_in_table" src={ic_edit} />


          </Dropdown.Toggle>

          <Dropdown.Menu className="room_change_dropdown">
            <Dropdown.Item className="room_change_dropdown_item">
              {roomNames.map((room_names, i) => (
                <div className="flex_radio">
                  <input
                    className="room_change_radio"
                    type="radio"
                    value={room_names}
                    onChange={HomeHandleChange }
                    checked={val === room_names}
                  />
                  <p className="drop_down_p">{room_names}</p>
                </div>
                ))}
            </Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
        </div>
    </>
  );
}
export default DropDownForRoomChange;

CodePudding user response：

Based on this example from react-bootstrap https://react-bootstrap.github.io/components/dropdowns/#custom-dropdown-components:

  const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
    <img className="ic_edit_in_table" src={ic_edit} />
  ));


  // ...

  <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" />

CodePudding user response：

it works

const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
    <a
    href=""
    ref={ref}
    onClick={(e) => {
      e.preventDefault();
      onClick(e);
    }}
  >
    {children}
    <img className="ic_edit" src={ic_edit} />
  </a>
  ));




  // ...

  <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" />