CODEWITHSUNDEEP
javascriptreactjs
MiRAY
MiRAY

Reputation: 79

Hide icon on each last item

I have a nested list with some items

my nested list example

Currently I'm displaying an arrow for each item, which results in a problem - if item has no sub-items, it still shows an arrow.

ListItem code (classNames are excluded for a better reading):

function CodeItem({ props }: CodeItemProps) {
  const cpvs = Object.keys(tree) as Array<CpvLabelKey>;
  const [open, setOpen] = React.useState(cpvs.some(c => codes.includes(c)));
  
  return (
    <div>
      <fieldset>
        <div >
          <button
            onClick={() => setOpen(!open)}
            aria-expanded={open}
          >
             // this icon should be displayed only if Item has sub-elements
            <UilAngleRight/>
          </button>
          <input
            type="checkbox"
            name={`cpv-${code}`}
            id={`cpv-${code}`}
            checked={checked}
            onChange={e => onChange(e.target.checked, code)}
          />
        </div>

        <label htmlFor={`cpv-${code}`}>
          {code} - {tCPV(code)}
        </label>
      </fieldset>

      // where I map each Item
      {open && (
        <div>
          {cpvs.map(code => (
            <CodeItem
              key={code}
              code={code}
              onChange={onChange}
              tree={tree[code]?.children || {}}
              checked={codes.includes(code)}
              codes={codes}
            />
          ))}
        </div>
      )}
    </div>
  );
}

How could I hide arrow on last elements, which has no over sub-elements?

Upvotes: 2

Views: 133

Answers (1)

JBaczuk
JBaczuk

Reputation: 14639

You can check if the array is not empty before rendering the icon

{!!cpvs.length && <UilAngleRight/>}

Upvotes: 1

Related Questions