Mirrrta

function calc(val = 0) {
  const self = {
    add: v => (val += v, self),
    sub: v => (val -= v, self),
    mul: v => (val *= v, self),
    div: v => (val /= v, self),
    pow: v => (val **= v, self),
    toString: () => val,
  };

  return self;
}


calc().add(5).mul(5) + 1 // 26
+calc(100).div(10).sub(2) // 8
`${calc(2).pow(10)}` // "1024"

pathname
  .match(/\/[^/]+/g)
  .map((n, i, a) => a.slice(0, i + 1).join(''))
  .map(n => ({
    title: routes.find(r => RegExp(`^${r.url.replace(/:[^\/]+/g, '[^\/]+')}$`).test(n))?.title ?? '',
    url: n,
  }))

А вы и не должны это делать вручную. Такие урлы должен парсить роутер:
https://habr.com/ru/post/329996/
https://github.com/ReactTraining/react-router
и гуглите дальше

1. Вам нужно с строки location.pathname вытянуть значение. Допустим /menu11
2. Дальше создать рекурсивную функцию, которая будет возращать масив с обєктами предков.
Могу примерно код сделать.
3. Ну а потом уже просто мапить етот масив.

Тупо и банально так
https://jsfiddle.net/jeoh4xb8/

Общий смысл:
1. Нужно получить проценты. Проценты - величина относительная. В моём случае - относительно максимального веса.
2. Становиться ясно, что нужно найти максимальный вес и высчитать относительно него остальные
3. За ширину отвечает width, значит её мы и будем задавать динамически
4. Погнали:) Это только пример. Не нужно реализовывать всё точно так, особенно рендер.

.line {
  height: 10px;
  background-color: #333;
}

// полагаю, вы получаете с сервера нечно такое:
const data = [
  {
    weight: '76'
  },
  {
    weight: '54'
  },
  {
    weight: '30'
  }
]

// находим максимум
const maxWeight = Math.max.apply(null, data.map( item => +item.weight ))

// относительно максимума высчитываем проценты
const percents = data.map( item => {
  return +item.weight / maxWeight * 100
})

// генерируем линии
const generateLine = percents => {
  return percents.map( percent => {
    return `
      <div style="width:${percent}%" class="line"></div>
    `
  }).join('')
}

// делаем функцию для рендеринга
const render = html => {
  document.body.innerHTML = html
}

// рендерим
render( generateLine( percents ) )

Если у вас максимум всегда 10, присваиваем maxWeight 10 и в объекте меняем значения на числа в диапазоне от 0 до 10.

Все дело в приоритете операторов https://developer.mozilla.org/ru/docs/Web/JavaScri...

Потому что язык не предоставляет такой возможности. Всегда нужно писать "отдельно".

5 < 6 < 7 // true
// но при этом 
8 > 4 > 2 // false

потому что

(8 > 4)  > 2
(true) > 2
1 > 2

В общем оно и не должно так работать, читай про приоритеты операторов и ассоциативность.

как тоже самое сделать при помощи метода match?

(str.match(/\S+/g) ?? [])[2]

что будет быстрее?

split, но вы этого не заметите

const [ items, setItems ] = useState([
  { value: ..., text: '...', checked: false },
  { value: ..., text: '...', checked: false },
  ...
]);

const onChange = ({ target: { checked, dataset: { index } } }) => {
  setItems(items.map((n, i) => i === +index ? { ...n, checked } : n));
};

<form>
  {items.map((n, i) => (
    <div>
      <label>
        <input
          type="checkbox"
          data-index={i}
          value={n.value}
          checked={n.checked}
          onChange={onChange}
        />
        {n.text}
      </label>
    </div>
  ))}
  <button disabled={items.every(n => !n.checked)}>submit</button>
</form>

https://jsfiddle.net/ps6zt52a/

Смотря какая именно задача.

Для совсем произвольных объектов - jsonb (ну или jsonb[], чтобы был массив).

Если объекты одной структуры, можно создать свой композитный тип и колонку typename[].

dimox.name/custom-checkboxes-and-radio-buttons-usi...

Функция группировки:

const group = (arr, idKey, valKey) =>
  Object.values(arr.reduce((acc, { [idKey]: id, [valKey]: val }) => (
    (acc[id] = acc[id] ?? { [idKey]: id, [valKey]: [] })[valKey].push(val),
    acc
  ), {}));

В компоненте:

const groupedAddresses = useMemo(() => {
  return group(addresses, 'city', 'address');
}, [ addresses ]);

<ul>
  {groupedAddresses.map(n => (
    <li>
      <h3>{n.city}</h3>
      <ul>{n.address.map(m => <li>{m}</li>)}</ul>
    </li>
  ))}
</ul>

https://jsfiddle.net/vqLsyz0x/

let arr = [
{city: 'Москва', address: 'адрес 1'},
{city: 'Москва', address: 'адрес 2'},
{city: 'Петербург', address: 'адрес 3'},
{city: 'Москва', address: 'адрес 4'},
]

[...new Set(arr.map(item => item.city))].map(function(item) {
   return {city: item, address: arr.filter(itm => itm.city == item).map(itm => itm.address)}
})

Можете попробовать атрибутом pattern (htmlbook.ru/html/input/pattern) и с помощью плагина masked input ( https://itchief.ru/lessons/javascript/input-mask-f... )

Можно так:

const PageLayout = ({ children }) => (
  <React.Fragment>
    <header>Header</header>
    {children}
    <footer>Footer</footer>
  </React.Fragment>
);

const Page = () => (
  <PageLayout>
    <Switch>
      <Route path='/my' component={My} />
      <Route path='/payments' component={Payments} />
    </Switch>
  </PageLayout>
);