0xD34F

.test('fileSizes', 'Resolution at least 120x120px', value => {
  return new Promise(resolve => {
    const img = new Image();
    img.onload = () => resolve(img.width >= 120 && img.height >= 120);
    img.src = window.URL.createObjectURL(value);
  });
})

const groupedUsers = users && users.reduce((acc, n) => {
  acc[new Date(n.dob).getMonth()].users.push(n);
  return acc;
}, [...Array(12)].map((n, i) => ({
  month: new Date(0, i).toLocaleString('ru-RU', { month: 'long' }),
  users: [],
})));

{groupedUsers && groupedUsers.map(n => (
  <div key={n.month}>
    <h2>{n.month}</h2>
    {n.users.map(user => (
      <div key={user.id}>
        <h3>user #{user.id}</h3>
        <div>данные пользователя...</div>
      </div>
    ))}
  </div>
))}

{this.state.ad.map(n => (
  <div key={n.id}>
    <h2>{n.title}</h2>
    <div>{n.images.map(src => <img src={src} />)}</div>
  </div>
))}

как лучше реализовать функционал, чтобы иконка была одна, а в нужных компонентах мы докидывали цвет?

const List = ({ items }) => {
  const [ active, setActive ] = React.useState(null);

  function onClick(e) {
    const index = +e.target.dataset.index;
    setActive(active === index ? null : index);
  }

  return (
    <ul>
      {items.map((n, i) => (
        <li key={n.id}>
          <span data-index={i} onClick={onClick}>{n.id}</span>
          {active === i ? <div>{n.link}</div> : null}
        </li>
      ))}
    </ul>
  )
};

const List = ({ items }) => {
  const [ active, setActive ] = React.useState({});

  const onClick = ({ target: { dataset: { index } } }) =>
    setActive(active => ({ ...active, [index]: !active[index] }));

  return (
    <ul>
      {items.map((n, i) => (
        <li key={n.id}>
          <span data-index={i} onClick={onClick}>{n.id}</span>
          {active[i] ? <div>{n.link}</div> : null}
        </li>
      ))}
    </ul>
  )
};

toggleDetails = (e) => {
  e.preventDefault();
  this.setState({ details: !this.state.details });
}

state = {
  disabled: false,
}

toggle(disabled) {
  this.setState(() => ({ disabled }));
}

onClick = () => {
  this.toggle(true);
  setTimeout(() => this.toggle(false), 2000);
}

<button disabled={this.state.disabled} onClick={this.onClick}>click me</button>

state = {
  opened: null,
}

toggle = ({ target: { dataset: { name } } }) => {
  this.setState(({ opened }) => ({
    opened: opened === name ? null : name,
  }));
}

state = {
  active: 0,
}

nextSlideHandler = ({ target: { dataset: { step } } }) => {
  const len = this.props.images.length;

  this.setState(({ active }) => ({
    active: (active + len + +step) % len,
  }));
}

<button data-step="-1" onClick={this.nextSlideHandler} className="prev">prev</button>
<button data-step="+1" onClick={this.nextSlideHandler} className="next">next</button>
<img src={this.props.images[this.state.active]} />

const [ active, setActive ] = useState(null);
const item = test.title[active];

const onClick = e => setActive(e.target.dataset.id);

{Object.keys(test.title).map(n =>
  <button key={n} data-id={n} onClick={onClick}>{n}</button>
)}

{item && <div>{item.title} ---- {item.category}</div>}

onClick = ({ target: { dataset: { shift } } }) => {
  this.setState(() => ({ shift }), this.filter);
}

this.setState({
  comments: comments.filter(
    (comment, i) => {
      return i !== index;
    },
    () => localStorage.setItem("state", JSON.stringify(this.state))
  )
});