Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – react-select I want to display and image in the option. But when I select that option, I want the control to display only the text part of that option

this is the options and formatOptionLabel function

  const brandOptions = films.map((film) => ({
    value: film.brand,
    label: film.brand,
  }))

  const formatOptionLabel = ({ value, label, isSelected }) => (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      {isSelected ? null : (
        <img
          src={films.find((film) => film.brand === value)?.brandpic}
          alt={value}
          style={{ marginRight: '8px', width: '20px', height: '20px' }}
        />
      )}
      {label}
    </div>
  )

this is the dropdown

    <ReactSelect
            value={brandOptions.find((option) => option.value === selectedBrand)}
            onChange={handleBrandChange}
            options={brandOptions}
            placeholder="choose the brand"
            formatOptionLabel={formatOptionLabel}
            className="bg-white ml-5 rounded-[40px] border-[#EBEBEB] shadow-sm w-[278px]"
          />

the options have image along with the brand name. but the problem is, when i click to choose the option, i want only the brand name display in the control. this code give me both the image and the brand name.

const formatOptionLabel = ({ value, label, isSelected }) => (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      {isSelected ? null : (
        <img
          src={films.find((film) => film.brand === value)?.brandpic}
          alt={value}
          style={{ marginRight: '8px', width: '20px', height: '20px' }}
        />
      )}
      {label}
    </div>
  )

the {isSelected ? null : ( … part seems to have no effect

Tags:

2

Answers


  1. 0

    formatOptionLabel
    Formats option labels in the menu and control as React components

    formatOptionLabel arrow function checks the context to determine whether the option is being displayed in the dropdown menu or in the control. If the option is in the dropdown menu, it includes the image. If the option is in the control that means it has been selected then it only displays the label.

    const formatOptionLabel = ({ value, label }, { context }) => {
    const film = films.find((film) => film.brand === value);
    return (
      <div style={{ display: "flex", alignItems: "center" }}>
        {context === "menu" ? (
          <img
            src={film?.brandpic}
            alt={value}
            style={{ marginRight: "8px", width: "20px", height: "20px" }}
          />
        ) : null}
        {label}
      </div>
    );
  };

    If you wanna play around with sample code.

    Login or Signup to reply.
  2. 0

    I had the same requirements and created my own component, have a look and let me know if it works for you as well:

    const controlledOptionsWithIcons = [
  {
    value: 'red',
    displayValue: 'Red',
    icon: <span className="red-icon" />,
    chipClassName: 'red-chip',
  },
  {
    value: 'orange',
    displayValue: 'Orange',
    icon: <span className="orange-icon" />,
    chipClassName: 'orange-chip',
  },
  {
    value: 'green',
    displayValue: 'Green',
    icon: <span className="green-icon" />,
    chipClassName: 'green-chip',
  },
];

const App = () => {
  const [singleWithIcons, setSingleWithIcons] = useState('red');

  return (
    <Dropdown
      wrapper={{
        label: 'No selected option icon',
      }}
      header={{
        controlledDropdown: {
          value: singleWithIcons,
          onChangeHandler: (value) => {
            setSingleWithIcons(value);
          },
          isDisplaySelectedOptionIcon: false,
        },
      }}
      body={{
        options: controlledOptionsWithIcons,
        isRightAligned: true,
      }}
    />
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search