Component for Checkbox Sum in React

I want to add a React component to an app, but I'm confused on how to pass the values of the checkboxes to the component. This is an example in Javascript and HTML on Codepen: https://codepen.io/OtoiEbba/pen/MWYONbx

This is the code I currently have. A component that displays a list of food from a JSON text file with a values for calories and fats. I want the values from the checkboxes to display in a different component.

import React from "react";
import { Card, Accordion } from "react-bootstrap";

const Cards = props => {
  return (
    <Card >
      <Accordion.Toggle as={Card.Header} eventKey={`${props.key}`}> 
        <input type="checkbox" value={props.calories} onChange={props.handleChecked}></input> {props && props.title + " : " + props.calories + "cal"}
      </Accordion.Toggle>
      <Accordion eventKey={`${props.key}`}>
        <Card.Body> {props.obj.nutrients && "fat: " + props.obj.nutrients["fat"]} || {props.obj.nutrients && "trans fats: " + props.obj.nutrients["trans-fat"]}</Card.Body>
      </Accordion>
    </Card>
  );
};

export default Cards;

This is the component I want to use the checkbox values in. I receive a compiling error whenever I try to import the values. So I left the component empty.

import React from 'react';
import Cards from './pages/cards';

class Calculator extends React.Component {
constructor(props){
    super(props);
    this.state = {
        total: 0
    }
 }


 render(){
     return(
        <div> </div>
     );
 }
};

Any help would be appreciated, thanks.