Как лучше сделать сайд эффект?

Question

[Flakelf]

Вечер в хату.

Интересует, как правильно сделать сайд эффект. Конкретно:

У меня есть компонент Card, выглядит вот так:

Код:

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import styled from 'styled-components';

const Styles = styled.div`
    .row {
        padding-top: 100px; padding-bottom: 500px
    }

    .card {
        max-width: 22rem;
    }

    .likes-section {
        display: inline
    }

    .heart-image {
        float: left;
    }

    .likes-count {
        font-size: 18px;
        padding-left: 46px;
        padding-top: 4px;
    }
`;

const Card = (props) => {

    console.log(props);

    const [state, setState] = useState({
        count: 22,
        isLiked: false
    });

    useEffect(() => {
        console.log(state);
    })

    const incrementLikes = () => {
        setState({
            ...state,
            count: !state.isLiked ? state.count + 1 : state.count - 1,
            isLiked: !state.isLiked
        });
    }

    return (
        <Styles>    
            <div className="container">
                <div className="row justify-content-center">
                    <div className="card">
                        <img className="card-img-top" src="https://pp.userapi.com/c852020/v852020640/a0273/sYULVSgkNZo.jpg"
                            alt="img here" />
                        <div className="card-body">
                            <h5 className="card-title">simple anime tyan with diet pepsi сola</h5>
                            <div className="likes-section">
                                <img onClick={incrementLikes} className="heart-image" src={state.isLiked ? 'https://img.icons8.com/color/34/000000/hearts.png' : 'https://img.icons8.com/ios/34/000000/hearts.png'} />
                                <p className="likes-count">{state.count}</p>
                                <p>{state.isLiked}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Styles>
    )
}

const mapStateToProps = state => {
    console.log(state);
    return state;
}

export default connect(mapStateToProps, null)(Card);

По клику на сердечко должен поставиться лайк и сработать запрос, интуитивно понятно с чем. Как реализовать лучше? Как получить в useEffect key нужной карточки?

Answer 1

[Антон Спирин]

Вам, по-хорошему, надо передавать в карточку action, принимающий идентификатор поста и инициирующий запрос на сервер.
<Img onClick={() => likePost(post.id) />}

const mapDispatchToProps = {
  likePost,
};

Comments

[Flakelf]

Понятное дело, а как этот post.id вытащить?

[Антон Спирин]

Flakelf, чтобы его вытащить, надо передавать в карточку post:

this.posts.map(post => <Card key={post.id} post={post} />);

const Card = ({ post, likePost }) => {
  return ( /* ... */);
}

[Flakelf]

Антон Спирин, точно, это же очевидно, просто пока всё в единичном экземпляре, поэтому не догадался, thx.

Answer 2

[irishmann]

использовать data-* атрибуты

Comments

[Flakelf]

Это единственное решение? Или самое очевидное и правильное? И как конкретно эти пользоваться?