function uses this.state and pass it to another component - reactjs

Question

hey guys simple question. i have a class component, with a state with two colors inside.
i want to create a onClick function, that when you click it, it shows 2 divs with backgroundColors from this.state.
and the button MOST be on the parent
here the code
class Parent extends React.Component{
constructor(props){
super(props);
this.state = {
color1: "#38306b",
color2: "#fff285"
}
saveColors() = {
// thats the part i dont get.
render(){
return(
<Child />
<button onClick={() => saveColors()}>save</button>
)
class Child extends React.Component{
render(){
return(
//those divs need to appear when we click the button with saveColors().
<div style={{backgroundColor: color1 from Parent's state}}></div>
<div style={{backgroundColor: color2 from Parent's state}}></div>
)
can i put this.state.color1 into a var and use it in the child component? or should i use return?? or something else??

Answer 1

You need to state in Parent to check button clicked. And pass value from Parent to Child:
this.state = {
color1: "#38306b",
color2: "#fff285",
isClicked: false,
}
saveColors = () => {
this.setState({isClicked: true})
}
<Child color1={this.state.color1} color2={this.state.color2} isClicked={this.state.isClicked} />
And on the `Child:
return (
...
{this.props.isClicked && (
<>
<div style={{backgroundColor: this.props.color1}}></div>
<div style={{backgroundColor: this.props.color2}}></div>
</>
)}
)

Answer 2

You can just pass the state to Child as a props
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
color1: "#38306b",
color2: "#fff285"
}
}
saveColors() {
}
render() {
return (
<div style={{ flex: 1, backgroundColor: 'red' }}>
<Child color={this.state} />
<button onClick={() => this.saveColors()}>save</button>
</div>
)
}
}
class Child extends React.Component {
render() {
return (
<>
<div style={{
flex: 1,
backgroundColor: this.props.color.color1,
height: 400
}}>
DIV1
</div>
<div style={{
flex: 1,
backgroundColor: this.props.color.color2,
height: 400
}}>
DIV2
</div>
</>
)
}
}
And if you want to change the color when the button clicked just change the state using setState
saveColors() {
this.setState({
color1: 'blue',
color2: 'red'
})
}