Как вывести смайл в компонент с наибольшим количеством кликов?

Question

[Дмитрий Ярощук]

При нажатие на кнопку ButtonResult выводиться наибольшее количество смайлов в компонент Winner, а должно выводиться смайл(к примеру ) с наибольшим количеством голосов. Не могу понять как передавать смайл с наибольшим количеством кликов в компонент Winner.

Answer 1

[0xD34F]

Передавайте в Winner не количество голосов, а элемент smiles целиком. Да, Math.max получить его не поможет, придётся самостоятельно перебирать массив в поисках максимума.

const Winner = ({ winner }) => winner
  ? <div>{winner.text}: {winner.value}</div>
  : null;

class App extends React.Component {
  state = {
    winner: null,
    smiles: [ 128540, 128520, 128640, 128526, 128566 ].map((n, i) => ({
      id: i + 1,
      text: String.fromCodePoint(n),
      value: 0,
    })),
  }

  vote(index) {
    this.setState(({ smiles }) => ({
      winner: null,
      smiles: smiles.map((n, i) => i === index
        ? { ...n, value: n.value + 1 }
        : n
      ),
    }));
  }

  showWinner = () => {
    this.setState(({ smiles }) => ({
      winner: smiles.reduce((max, n) => max.value > n.value ? max : n),
    }));
  }

  render() {
    const { smiles, winner } = this.state;

    return (
      <div>
        <ul>
          {smiles.map((n, i) => (
            <li key={n.id}>
              <button onClick={() => this.vote(i)}>{n.text}: {n.value}</button>
            </li>
          ))}
        </ul>
        <button onClick={this.showWinner}>show winner</button>
        <Winner winner={winner} />
      </div>
    );
  }
}