0xD34F

{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))
  )
});

incrementCount = (id, name, price) => {
  this.setState(({ count }) => {
    const el = count.find(n => n.id === id);
    return {
      count: el
        ? count.map(n => n === el ? { ...n, count: n.count + 1 } : n)
        : [ ...count, { id, name, price, count: 1 } ]
    };
  });
}

this.state.count.reduce((acc, n) => acc + n.price * n.count, 0)