<div id="root"></div>
.childComponent{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    text-align: center;
}

.active{
    background-color: blueviolet;
}

const ChildComponent = (props) => {
    const [style, setStyle] = React.useState('childComponent');
    const [active, setActive] = React.useState(false)

    const setActiveStyle = () => {
        if (!active) {
            setStyle('childComponent' + ' ' + 'active')
            setActive(true)
        } else {
            setStyle('childComponent');
            setActive(false)
        }
    };


    return (
        <div className={style} onClick={() => {
            props.updateData(props.id, () => setActiveStyle())
        }}>
            <h3>{props.name}</h3>
        </div>
    )
};


const ParentComponent = (props) => {
    const state = [{'id': 0, 'name': 'один'}, {'id': 1, 'name': 'два'}, {'id': 2, 'name': 'три'}];

    const [clicked, setClicked] = React.useState(null);

    const highlight = (id, makeChildActive) => {
        setClicked(id);
        makeChildActive();
    };

    return (
        <div>
            {state.map(entity =>
                <ChildComponent updateData={highlight}
                                key={entity.id}
                                id={entity.id}
                                name={entity.name}
                                isActive={(entity.id === clicked) ? 'active' : null}
                />
            )}
        </div>
    )
};


ReactDOM.render(
    <ParentComponent/>,
    document.getElementById('root')
);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js