react - access state outside of component

Question

I understand if this might seem like a noobish question but I'm trying to teach myself react.

The context is, I have created a Card component which contains multiple CardItem components. Whenever the CardItem's main div is clicked, the clicked state inside that same CardItem changes from false to true; I'm looking to access the clicked state of the CardItem component from the Cards component.

My code below:

Cards.js

import React, { Component } from 'react'
import Carditem from './Carditem'
import "./Cards.css"

export class Cards extends Component {
    constructor(props) {
        super(props)
    
        this.state = {childClicked: 0}

        this.handler = this.handler.bind(this)
    }

    handler(){
        this.setState((ps)=>({
            childClicked: ps + 1
        }))        
    }


    render() {
        console.log(this.state.childClicked)
        return (
            <div>
                <div className="cards">
                    <Carditem cardTitle="Online membership" cardPrice="€150"></Carditem>
                    <Carditem cardTitle="Deluxe package" cardPrice="€400" onClick={this.handler} ></Carditem>
                    <button className={this.childClicked >= 1 ? 'child-clicked-class' : 'no-child-clicked-class'}>Button</button>
                </div>
            </div>
        )
    }
}

export default Cards

CardItem.js

import React, { Component } from 'react'
import "./Carditem.css"

export class Carditem extends Component {

    constructor(props) {
        super(props)

        this.state = {clicked: false}

        this.toggleClick = this.toggleClick.bind(this)
    }

    toggleClick(){
        this.setState((prevstat) => ({
            clicked: !prevstat.clicked
        }))
    }
    
    render() {
        const {cardTitle, cardPrice } = this.props

        return (
            <div className={`card card-light ${this.state.clicked ? 'card-light-clicked' : 'card-light'}`} onClick={this.toggleClick}>
                <h2 className="card-title">{cardTitle}</h2>
                <p className="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, dsadas,usnaytw iunxgafu.</p>
                <span className="card-price">{cardPrice}</span>
            </div>
            
        )
    }
}

export default Carditem

The end result I'm hoping for is, to change the button's class name in Cards if any of the CardItem components has a state of true.

Thanks in advance.

Answer 1

You are passing the click handler as prop named onClick from parent Card to child CardItem , you have to acces that prop and toggle it when clicking on an item in your child, so you have to call it inside your function toggleClick :

toggleClick(){
    this.setState((prevstat) => ({
        clicked: !prevstat.clicked
    }))
    this.props.onClick()
}