the changed value does not show in Dom - reactjs

Question

I am learning React, in my test app, I make 2 identical sets of random colored array that will shuffle and change color every time I click on 'change color' button. however I can not seem to make the Dom updates my array colors even the values of colors change correctly.
import React from 'react';
class Card extends React.Component{
constructor(props){
super(props);
const {r,g,b}=this.props.card
this.state={
style:{
width:'100px',
height:'100px',
display:'inline-block',
backgroundColor:`rgb(${r},${g},${b})`
}
}
}
onClick=()=>{
const {r,g,b}=this.props.card
console.log('color values of the card with index',this.props.id ,' is: ', r,g,b)
}
render(){
const {style}=this.state
return (
<div style={style}>
<button onClick={this.onClick}>card test</button>
</div>
)
}
}
export default Card;
this is the picture of my problem
as you can see in the picture, the values change every time I click but the cards' color stay the same. however, it will work if I change the class based component into non class based component and set the style in render() instead of constructor, but I want to have a class component so I can pass the card I click to parent component.

Answer 1

Is onClick triggering something else as well? Otherwise, don't see what would change the card's values, since the onClick is just logging.
Assuming the card prop is somehow changing correctly, I believe your issue is that your card prop is updating, but the state is set in the constructor and never updated.
Rather then setting a style value in state, I would just change to calculating style in render.
render() {
const {r,g,b} = this.props.card
const style = {
width: '100px',
height: '100px',
display: 'inline-block',
backgroundColor: `rgb(${r},${g},${b})`
}
return (
<div style={style}>
<button onClick={this.onClick}>card test</button>
</div>
)
}
You generally do not what to keep state that is easily derived from props to avoid situations like this.