0xD34F

Пытался нагуглить, но самостоятельно разобраться в простыне кода не могу.

handleTdClick(item) {

{this.state.rows.map((row, rowIndex) => (
  <tr>
    {row.map((item, colIndex) => (
      <td
        onClick={this.onTdClick}
        data-row={rowIndex}
        data-col={colIndex}
        className={item ? 'not-empty' : 'empty'}
      >
        {item}
      </td>
    ))}
  </tr>
))}

onTdClick = ({ target: { dataset: d } }) => {
  const row = +d.row;
  const col = +d.col;

  this.setState(({ rows }) => ({
    rows: rows.map((n, i) =>
      i === row
        ? n.map((m, j) => j === col ? +!m : m)
        : n
    )
  }));
}

const addEntry = (state, action) => {
  const cards = [...state.cards];
  const index = cards.findIndex(n => n.id === action.id);
  const card = {...cards[index]};
  card.entries = [ ...card.entries, { id: Math.random().toString(36).substring(7) } ];
  cards[index] = card;
  return { cards };
};

const addEntry = (state, action) => {

Проблема в том, что компонент Form, некоторые элементы которого зависят от стейта - не ререндерятся.

class App extends React.Component {
  state = {
    divStyle: {
      display: 'flex',
      alignItems: 'center',
      width: '1000px',
      height: '500px',
      outline: '1px solid red',
      position: 'relative',
    },
    move: {
      position: 'absolute',
      width: '200px',
      height: '100px',
      outline: '1px solid green',
      left: 100,
      top: 200,
    },
  }

  handlerMouseDown = e => {
    this.deltaX = e.pageX - this.ourdiv.offsetLeft;
    this.deltaY = e.pageY - this.ourdiv.offsetTop;
    window.addEventListener('mousemove', this.handlerMouseMove);
  }

  handlerMouseUp = e => {
    window.removeEventListener('mousemove', this.handlerMouseMove);
  }

  handlerMouseMove = ({ pageX }) => {
    this.setState(({ move }) => ({
      move: {
        ...move,
        left: Math.min(700, Math.max(100, pageX - this.deltaX)),
      },
    }));
  }

  render() {
    return (
      <div>
        <div style={this.state.divStyle}>
          <div
            ref={ourdiv => this.ourdiv = ourdiv}
            style={this.state.move}
            onMouseDown={this.handlerMouseDown}
            onMouseUp={this.handlerMouseUp}
          ></div>
        </div>
      </div>
    );
  }
}

Object.keys(notif).map(key => <div key={key}>{key} - {notif[key]}</div>)

_.map(notif, (value, key) => <div key={key}>{key} - {value}</div>)

class App extends React.Component {
  state = {
    data: [
      '#088A85', '#0B2F3A', '#0B0B3B', '#2A0A29', '#B4045F',
      '#FA58F4', '#A9BCF5', '#58FA82', '#A9F5F2', '#CED8F6',
    ].map((n, i) => ({
      id: i + 1,
      color: n,
      title: `block #${i}`,
      opened: false,
    })),
  }

  updateItem(index, key, val) {
    const data = [...this.state.data];
    data[index][key] = val;
    this.setState({ data });
  }

  render() {
    return (
      <div>{this.state.data.map(({ id, color, title, opened }, i) => (
        <div key={id}>
          <div
            className="square"
            style={{ backgroundColor: color }}
            onClick={() => this.updateItem(i, 'opened', !opened)}
          >
            <p>{title}</p>
          </div>
          {opened &&
          <div>
            <input
              value={color}
              onChange={e => this.updateItem(i, 'color', e.target.value)}
            />
            <input
              value={title}
              onChange={e => this.updateItem(i, 'title', e.target.value)}
            />
          </div>}
        </div>))}
      </div>
    )
  }
}

.square {
  width: 100px;
  height: 100px;
}

class Game extends React.Component {
  state = {
    panesCurrent: [],
    panesDefault: [ 1, 1, 1, 0, -1, -1, -1 ],
    panesWin: [ -1, -1, -1, 0, 1, 1, 1 ],
  }

  componentDidMount() {
    this.reset();
  }

  componentDidUpdate() {
    if (this.state.panesCurrent.every((n, i) => n === this.state.panesWin[i])) {
      setTimeout(alert, 25, 'WIN');
    }
  }

  onClick(index) {
    const clicked = this.state.panesCurrent[index];
    if (clicked === 0) {
      return;
    }

    for (let i = 1; i <= 2; i++) {
      const t = index + clicked * i;
      if (this.state.panesCurrent[t] === 0) {
        const panes = [...this.state.panesCurrent];
        [ panes[index], panes[t] ] = [ panes[t], panes[index] ];
        this.setState({ panesCurrent: panes });
        break;
      }
    }
  }

  reset = () => {
    this.setState(({ panesDefault }) => ({
      panesCurrent: [...panesDefault],
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.reset}>reset</button>
        <div className="game">
          {this.state.panesCurrent.map((n, i) => (
            <div
              className={'pane ' + [ 'left', '', 'right' ][n + 1]}
              onClick={() => this.onClick(i)}
            ></div>
          ))}
        </div>
      </div>
    )
  }
}

.game {
  font-size: 5px;
}

.pane {
  display: inline-block;
  width: 10em;
  height: 10em;
  margin: 1em;
}

.pane.right::after,
.pane.left::after {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: monospace;
  font-size: 4em;
}
.pane.right::after {
  content: "-->";
  color: red;
  border: 2px solid red;
}
.pane.left::after {
  content: "<--";
  color: lime;
  border: 2px solid lime;
}

deleteItem(id) {
  this.setState(({ items }) => ({
    items: items.filter(n => n.id !== id),
  }));
}

class App extends React.Component {
  state = {
    items: [...this.props.items.map((n, i) => ({
      id: i + 1,
      value: n,
    }))],
    newItem: '',
    search: '',
  }

  addItem = () => {
    this.setState(({ items, newItem }) => ({
      items: [ ...items, {
        id: 1 + Math.max(0, ...items.map(n => n.id)),
        value: newItem,
      } ],
      newItem: '',
    }));
  }

  deleteItem(id) {
    this.setState(({ items }) => ({
      items: items.filter(n => n.id !== id),
    }));
  }

  onChange = ({ target: { value, name } }) => {
    this.setState(() => ({
      [name]: value,
    }));
  }

  render() {
    const search = this.state.search.toLowerCase();
    const filteredItems = this.state.items.filter(n => n.value.toLowerCase().includes(search));

    return (
      <div>
        <div>
          <input
            value={this.state.newItem}
            onChange={this.onChange}
            name="newItem"
            placeholder="Add..."
          />
          <button onClick={this.addItem}>Добавить</button>
        </div>
        <div>
          <input
            value={this.state.search}
            onChange={this.onChange}
            name="search"
            placeholder="Search..."
          />
        </div>
        <ul>
          {filteredItems.map(n => (
            <li key={n.id}>
              {n.value}
              <button onClick={() => this.deleteItem(n.id)}>Удалить</button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(
  <App
    items={[
      'hello, world!!',
      'fuck the world',
      'fuck everything',
    ]}
  />,
  document.getElementById('app')
);

{this.props.product.map(n => <Product key={n.id} product={n} />)}

{Object.keys(anyIcons).map(type => (
  <Category>
    <CategoryType>
      {type === 'people' && 'PEOPLE'} 
      {type === 'nature' && 'ANIMALS & NATURE'}
    </CategoryType>
    {anyIcons[type].map(icon => (
      <RedactorEmojiItem data={icon.code}>{icon.title}</RedactorEmojiItem>
    ))}
  </Category>
))}