компонент не меняет состояние для каждого элемента в массиве

Question

Сценарий, когда я нажимаю кнопку, она загружает набор карточек на основе элементов массива. Когда я нажимаю другую кнопку, она тоже загружает набор карточек, родных для этой кнопки

Нижекод, который получит каждую карту для элемента массива

{!!props[props.clickedindex].Products
   ? (props[props.clickedindex].Products.map((Products, i)=> <CardProduct {...props[props.clickedindex].Products} key={i} index={i} arrkey={Object.keys(Products)} /> ))
                  : (<div />)}

Вот код карты

Проблема в том, что когда я нажимаю первую кнопку, а в ней всего 3 элемента, яполучить три цвета идеально на основе реквизита изменения состояния

Но когда нажимаете вторую кнопку и есть 6 элементов, первые 3 сохраняют то же состояние и цвет и не обновляются вообще

Я думаю, что я мутирую, если да, помогите мне, как не

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Card, { CardContent, CardMedia, CardActions } from 'material-ui/Card';
import { Typography, Grid, Button, Paper } from 'material-ui';

//{styles removed for easy reading}

class CardProduct extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            background: '#ffffff'
        }
    }

    componentWillMount = () => {
        const { props } = this

        console.log(props.arrkey[0].toString())
        switch (props.arrkey[0].toString()) {
            case 'Passion':
                return (
                    this.setState({ background: '#EF5350' })
                )
                break
            case "Love":
                return (
                    this.setState({ background: '#FFB74D' })
                )
                break
            case "Intelligence":
                return (
                    this.setState({ background: '#42A5F5' })
                )
                break
            case "Anger":
                return (
                    this.setState({ background: '#78909C' })
                )
                break
            case "Perseverance":
                return (
                    this.setState({ background: '#8D6E63' })
                )
                break
            case "determination":
                return (
                    this.setState({ background: '#66BB6A' })
                )
                break
            case "Speed":
                return (
                    this.setState({ background: '#EC407A' })
                )
                break
            case "Focus":
                return (
                    this.setState({ background: '#8D6E63' })
                )
                break
            default: return this.state;
        }
    }

    render() {
        const { props } = this
        const { classes } = this.props;


        console.log('THIS IS PROPS IN PRODUCTCARD,', props.arrkey[0], this.state, props[props.index],props)

        return (
            <div >

                <Card className={classes.card} >
                    <div
                        className={classes.media}
                        style={{ background: this.state.background }}>
                        <Typography style={{ color: '#000000' }} gutterBottom variant="caption" component="h2" align='center' >
                            {`${props.arrkey}`}
                        </Typography>
                    </div>
                    <CardContent style={{ padding: '1vw', alignItems: 'center' }}>
                        <Typography gutterBottom variant="caption" component="h2" align='center' >
                            {`${props[props.index][props.arrkey]}`}
                        </Typography>
                    </CardContent>

                </Card>
            </div>
        );
    }
}

CardProduct.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CardProduct);

Answer 1

сделал ли это обходной путь Надеюсь, что это правильный метод

 colorChooser = (props) => {

        switch (props.arrkey[0].toString()) {
            case 'Relationship':
                return (
                    this.CardDiv('#EF5350' )
                )
                break
            case "Marriage":
                return (
                    this.CardDiv( '#FFB74D' )
                )
                break
            case "Children":
                return (
                    this.CardDiv('#42A5F5' )
                )
                break
            case "yearly":
                return (
                    this.CardDiv( '#78909C' )
                )
                break
            case "Monthly":
                return (
                    this.CardDiv('#8D6E63' )
                )
                break
            case "Questions":
                return (
                    this.CardDiv('#66BB6A' )
                )
                break
            case "Matching":
                return (
                    this.CardDiv('#EC407A' )
                )
                break
            case "Career":
                return (
                    this.CardDiv( '#66BB6A' )
                )
                break
            default: return this.CardDiv('#ffffff');

        }
    }

    CardDiv = (bgcolor) => {
        const { props } = this
        const classes = props.classes
        return (
            <div
                className={classes.media}
                style={{ background:(bgcolor.toString()) }}>
                <Typography style={{ color: '#000000' }} gutterBottom variant="caption" component="h2" align='center' >
                    {`${props.arrkey}`}
                </Typography>
            </div>)
    }

    render() {
        const { props } = this
        const { classes } = this.props;


        console.log('THIS IS PROPS IN PRODUCTCARD,', props.arrkey[0], this.state, props[props.index])

        return (
            <div >

                <Card className={classes.card} >
                {this.colorChooser(props)}

                    <CardContent style={{ padding: '1vw', alignItems: 'center' }}>
                        <Typography gutterBottom variant="caption" component="h2" align='center' >
                            {`${props[props.index][props.arrkey]}`}
                        </Typography>
                    </CardContent>

                </Card>
            </div>
        );
    }