I want to print the state of the checkboxes live on screen

Basically now I'm printing a new array in the console everytime that the checkbox are checked with the new values like for example: Results [true, false, false]; = if the first one is the only checkbox checked.

Now I want to show in the SimpleCard react component the corresponding text, but everytime it must change accordingly to the new array created everytime I select or unselect one of the checkboxes. Like, for example, : First one checked, Second one not checked, Third one not checked and so on...

Hope I've been able to explain it to you.

    constructor(props) {
        super(props);

        this.onChange = this.onChange.bind(this);
        //this.showlive = this.showlive.bind(this)

        const checkboxList = [
            {
                id: "blu",
                name: "blu",
                value: "blu",
                dimension: "sm",
                label: "blu",
                inputClass: [],
                labelClass: [],
                event: { onChange: this.onChange },
                extraProps: { visible: true, checked: false }
            },
            {
                id: "red",
                name: "red",
                value: "red",
                dimension: "sm",
                label: "red",
                inputClass: [],
                labelClass: [],
                event: { onChange: this.onChange },
                extraProps: { visible: true, checked: true }
            },
            {
                id: "yellow",
                name: "yellow",
                value: "yellow",
                dimension: "sm",
                label: "yellow",
                inputClass: [],
                labelClass: [],
                event: { onChange: this.onChange },
                extraProps: { visible: true, checked: false }
            }
        ]

        this.state = {
            error: null,
            checkboxList: checkboxList

        }
    };

    componentDidMount() {
  
    }

    onChange(event) {
        const checkboxList = this.state.checkboxList.map((elem) => {
            if (elem.name === event.target.name)
                elem.extraProps.checked = event.target.checked
            return elem
            
            
        })

        this.setState({ 
            checkboxList: checkboxList,
            SimpleCard: Body })
    }

    render(){

        let i;
        let Risultati = [];

        for(i=0; i<3; i++){
            let v = this.state.checkboxList[i].extraProps.checked;
            Risultati.push(v)
            return Risultati; 
        }
        
        console.log(Risultati);

        const legend = "Checkbox"

        return (
            <div>
                <Checkbox
                    checkboxList={this.state.checkboxList}
                    legend={legend}
                ></Checkbox>

                <SimpleCard
                    title="Colors selected"
                    titleHeading="h2"
                    data={<p> Data</p>}
                    body={ <p> Here I want the text to be displayed </p>}
                >
                    {" "}
                </SimpleCard>
            </div>
        );
    };
};