React Context Api

Im developing a products table with checkboxes on the side, the check box job is to send the Id of the choosen product once its clicked to it's grandfather so i can build an array of the choosen ones and send them via api.

Its built like this:

grandfather - Table page component.

father - The table itself.

child - The checkbox component.

basically I'm having trouble how to pass the information, i know i should use context api but the syntax is confusing me, here's the code:

Grandfather:

interface Istate {
  Select: boolean;
  SelectT: boolean;
  SelectI: boolean;
  Loader: boolean;
  numOfProds: number;
  listing: any;
  checkBoxId: any;
  prodName: string;
  quantity: number;
  price: number;
  TempProdName: string;
  TempQuantity: number;
  TempPrice: number;
}

interface Iprops {
  id: string;
  name: string;
}

class Products extends Component<Iprops, Istate> {
  state = {
    Select: false,
    SelectT: false,
    SelectI: false,
    Loader: false,
    numOfProds: 0,
    listing: Array,
    checkBoxId: '',
    prodName: '',
    quantity: 0,
    price: 0,
    TempProdName: '',
    TempQuantity: 0,
    TempPrice: 0,
  };

  async componentDidMount() {
    this.showLoader();
    const listing = await AllProductsService.AllProducts();
    this.setState({ listing });
    console.log(listing);
    this.setState({ numOfProds: listing.length });
    this.hideLoader();
  }

  toggleSelect = () => {
    const { Select } = this.state;
    this.setState({ Select: !Select });
  };

  toggleSelect2 = () => {
    const { SelectT } = this.state;
    this.setState({ SelectT: !SelectT });
  };

  toggleSelect3 = () => {
    const { SelectI } = this.state;
    this.setState({ SelectI: !SelectI });
  };

  showLoader = () => {
    this.setState({ Loader: true });
  };

  hideLoader = () => {
    this.setState({ Loader: false });
  };

  CancelValue = () => {
    const { prodName, quantity, price, TempPrice, TempProdName, TempQuantity } = this.state;
    this.setState({ TempProdName: prodName });
    this.setState({ TempQuantity: quantity });
    this.setState({ TempPrice: price });
  };

  changeValue = (checkBoxId: any, value: any) => {
    this.setState({
      [checkBoxId]: value,
    } as any);
  };

  render() {
    const {
      Select,
      SelectT,
      SelectI,
      listing,
      numOfProds,
      Loader,
      checkBoxId,
      prodName,
      quantity,
      price,
      TempProdName,
      TempQuantity,
      TempPrice,
    } = this.state;
    const { name, id } = this.props;
    return (
      <ProductTableProvider
        value={{
          prodName,
          quantity,
          price,
          checkBoxId,
          changeValue: this.changeValue,
        }}
      >
        <Breadcrumb path1="/overview" one="Dashboard" path2="/dashboard/products" two="All Products" />
        <InsideWrapper>
          <Platform>
            <h2>Products</h2>
            <br />
            <p>Manage your products</p>
            <CardStat header="Total" numOf={numOfProds} page="Products" />
            <CardStat header="Ebay" numOf={numOfProds} page="Products" />
            <div className="col-sm text-center new w-100">
              <div className="text-right mb-4">
                <GreenButton onClick={this.toggleSelect3}>Export to Ebay</GreenButton>
                <SimpleModal isOpen={SelectI} close={this.toggleSelect3} whatToDo={`Export ${name} to Ebay?`}>
                  <YesNoButton name={name} id={id} />
                </SimpleModal>
                <RegularButton onClick={this.toggleSelect}>Save</RegularButton>
                <SimpleModal isOpen={Select} close={this.toggleSelect} whatToDo="Are you sure you want to save?">
                  <YesNoButton name={name} id={id} />
                </SimpleModal>
                <OrangeButton onClick={this.CancelValue}>Cancel</OrangeButton>
                <DeleteButton onClick={this.toggleSelect2}>Delete</DeleteButton>
                <SimpleModal isOpen={SelectT} close={this.toggleSelect2} whatToDo="Are you sure you want to delete?">
                  <YesNoButton name={name} id={id} />
                </SimpleModal>
              </div>
              <Card>{Loader ? <Loading /> : <DatatablePage listing={listing} />}</Card>
            </div>
          </Platform>
        </InsideWrapper>
      </ProductTableProvider>
    );
  }
}
export default Products;

Father:

const DatatablePage = (props: any) => {
  const { listing } = props;
  const rows = Array.isArray(listing)
    ? listing.map((val: any) => {
        return {
          select: <CheckBoxComp value={false} id={val._id} />,
          name: <TableText value={val.name} id={val._id} />,
          barcode: val._id,
          category: val.category,
          image: <ImageSec src={ImageProd} />,
          unitsInStock: <TableText value={val.unitsInStock} id={val._id} />,
          price: <TableText value={val.price} id={val._id} />,
          more: <ButtonsPopUp name={val.name} id={val._id} />,
        };
      })
    : [];
  const data = {
    columns: [
      {
        label: '',
        field: '',
        sort: 'disabled',
        width: 20,
      },
      {
        label: 'Name',
        field: 'name',
        sort: 'asc',
        width: 100,
      },
      {
        label: 'Barcode',
        field: 'barcode',
        sort: 'asc',
        width: 100,
      },
      {
        label: 'Category',
        field: 'category',
        sort: 'asc',
        width: 100,
      },
      {
        label: 'Images',
        field: 'images',
        sort: 'asc',
        width: 100,
      },
      {
        label: 'Quantity',
        field: 'unitsInStock',
        sort: 'asc',
        width: 150,
      },
      {
        label: 'Price',
        field: 'price',
        sort: 'asc',
        width: 150,
      },
      {
        label: '...',
        field: 'more',
        sort: 'disabled',
        width: 100,
      },
    ],
    rows,
  };
  return (
    <Rules>
      <MDBDataTable
        entriesLabel="Show Products"
        infoLabel={['Showing', 'to', 'of', 'Products']}
        fixed
        responsive
        btn
        sortable
        hover
        data={data}
        theadColor="white"
      />
    </Rules>
  );
};

export default DatatablePage;

Child:

interface Istate {
  checked: boolean;
  products?: any[];
}
interface Iprops {
  id: any;
  value: any;
  changeValue?: (checkBoxId: string, value: any) => void;
}
class CheckBoxComp extends Component<Iprops, Istate> {
  state = {
    checked: true,
    products: [] as any,
  };

  addOne = (id: any, checked: any) => {
    let { products } = this.state;
    const newObj = { id, checked };
    products = products.concat(newObj);
    this.setState({ products }, () => {
      console.log(products);
    });
  };

  isChecked = (id: any) => {
    const { checked, products } = this.state;
    const { changeValue } = this.props;
    console.log(id);
    this.setState({
      checked: !checked,
    });
    if (changeValue) {
      changeValue(id, checked);
    }
    this.addOne(id, checked);
  };

  render() {
    const { id, value } = this.props;
    const { checked } = this.state;
    return (
      <Fragment>
        <Checkbox>
          <span />{''}
          <label className="checkbox-wrapper">
            <span className="display" />
            <Inputt type="checkbox" value={checked} onChange={this.isChecked.bind(this, id)} />
            <span className="checkmark" />
          </label>
        </Checkbox>
      </Fragment>
    );
  }
}

export default CheckBoxComp;

any help wrapping the code correctly using context api?