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

Question

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

export default class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            vote1: 0,
            vote2: 0,
            vote3: 0,
            vote4: 0,
            vote5: 0,
        }
        this.increaseVote = this.increaseVote.bind(this);
        this.checkWinner = this.checkWinner.bind(this);
    }
    increaseVote(id) {
        this.setState(state => {
            return {
                [id]: state[id] + 1
            }
        })
    }
    checkWinner() {
        const winner = Math.max(...Object.values(this.state))
        console.log('winner: ', winner)
        this.setState( {
            winner
        })
    }
  render() {
    return (
        <Wrapper>
          <List>
            <Item text="&#128540;" id="vote1" increaseVote={this.increaseVote} state={this.state}/>
            <Item text="&#128520;" id="vote2" increaseVote={this.increaseVote} state={this.state}/>
            <Item text="&#128640;" id="vote3" increaseVote={this.increaseVote} state={this.state}/>
            <Item text="&#128526;" id="vote4" increaseVote={this.increaseVote} state={this.state}/>
            <Item text="&#128566;" id="vote5" increaseVote={this.increaseVote} state={this.state}/>
          </List>
          <ButtonResult checkWinner={this.checkWinner} />
          <Winner winner={this.state.winner}/>
        </Wrapper>
    )
  }
}

Winner

export default class Winner extends React.Component {
    render() {
        const { winner } = this.props;
        return (
            <div className="block-winner">{winner}</div>
        )
    }
}

Item.js

export default class Item extends React.Component {
    render() {
        const { id, text, state, increaseVote } = this.props;
        const onClick = () => increaseVote(id);
        return (
            <li>
                <ButtonSmile onClick={onClick} id={id} text={text}/>
                <Count text={state[id]}/>
            </li>
        )
    }
}

ButtonResult.js

export default class ButtonResult extends React.Component {
    render() {
        const { checkWinner } = this.props;
        return (
            <button onClick={checkWinner}  className="button-result">Result</button>
        )
    }
}

ButtonSmile

export default class ButtonSmile extends React.Component {
    render() {
            const { id, text, onClick } = this.props;
        return (
            <button onClick={onClick} className="button" id={id}>{text}</button>
        )
    }
}

Count

export default class Count extends React.Component {
    render() {
        const { text } = this.props;
        return (
            <p className="count-click">{text}</p>
        )
    }
}

List

export default class List extends React.Component {
    render() {
        return (
            <ul className="list-buttons" id="listButtons">{this.props.children}</ul>
        )
    }
}

Wrapper

export default class Wrapper extends React.Component {
    render() {
        return (
            <div className="wrapper">{this.props.children}</div>
        )
    }
}

БЛОГ НА HUSL

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

Ответы (0 шт):