React. How to get radio button value from another component

Question

I have a child component, inside it are some radio buttons, each of them have its own value, I imported this child component to a parent component and rendered it to manage its state from here (parent component), with the child component added I need to access to all the input radio buttons to know which one is selected

CHILD COMPONENT

import React from 'react';
import styles from './TradicionalTable.module.css';

export default function ContabilidadT({
    PropPrecioContabilidad,
    PropHandleChangeContabilidad,}) {

    // price vairables
    let noAgregarPrecio = 0;
    let basicoPrecio = 6615;
    let ligeroPrecio = 8610;
    let profesionalPrecio = 10900;
    let premiumPrecio = 15600;
    let corporativoPrecio = 31350;
    let incrementoDeCincoPrecio = 15510;

// object prices
let precios = {
    contabilidad: {
        noAgregar: noAgregarPrecio,
        basico: basicoPrecio,
        ligero: ligeroPrecio,
        profesional: profesionalPrecio,
        premium: premiumPrecio,
        corporativo: corporativoPrecio,
        incremento1: corporativoPrecio + incrementoDeCincoPrecio,
        incremento2: corporativoPrecio + incrementoDeCincoPrecio * 2,
        incremento3: corporativoPrecio + incrementoDeCincoPrecio * 3,
        incremento4: corporativoPrecio + incrementoDeCincoPrecio * 4,
        incremento5: corporativoPrecio + incrementoDeCincoPrecio * 5,
        incremento6: corporativoPrecio + incrementoDeCincoPrecio * 6,
        incremento7: corporativoPrecio + incrementoDeCincoPrecio * 7,
        incremento8: corporativoPrecio + incrementoDeCincoPrecio * 8,
    },
};

// get inputs

return (
    <>
        <div className={styles.tradicionalInputs}>
            <div className={styles.tradicionalModuleTitles}>
                <h2>Contabilidad</h2>
            </div>

            <div className={styles.inputBox}>
                {/* <label htmlFor="">No agregar</label> */}
                <input
                    id="noAgregarContabilidad"
                    checked={PropPrecioContabilidad == noAgregarPrecio}
                    onChange={PropHandleChangeContabilidad}
                    type="radio"
                    name="contabilidad"
                    value={precios.contabilidad.noAgregar}
                />
            </div>

            <div className={styles.inputBox}>
                {/* <label htmlFor="">Basico 1</label> */}
                <input
                    onChange={PropHandleChangeContabilidad}
                    type="radio"
                    name="contabilidad"
                    value={precios.contabilidad.basico}
                />
            </div>

            <div className={styles.inputBox}>
                {/* <label htmlFor="">Ligero 2</label> */}
                <input
                    onChange={PropHandleChangeContabilidad}
                    type="radio"
                    name="contabilidad"
                    value={precios.contabilidad.ligero}
                />
            </div>

            <div className={styles.inputBox}>
                {/* <label htmlFor="">Profesional 3</label> */}
                <input
                    onChange={PropHandleChangeContabilidad}
                    type="radio"
                    name="contabilidad"
                    value={precios.contabilidad.profesional}
                />
            </div>

            <div className={styles.inputBox}>
                {/* <label htmlFor="">Premium 5</label> */}
                <input
                    onChange={PropHandleChangeContabilidad}
                    type="radio"
                    name="contabilidad"
                    value={precios.contabilidad.premium}
                />
            </div>

            <div className={styles.inputBox}>
                {/* <label htmlFor="">Corporativo 10</label> */}
                <input
                    onChange={PropHandleChangeContabilidad}
                    type="radio"
                    name="contabilidad"
                    value={precios.contabilidad.corporativo}
                />
            </div>

            <div className={styles.inputBox}>
                {/* <label htmlFor="">Numero de usuarios</label> */}
                <select
                    id="contabilidadSelect"
                    onChange={(e) => {
                        // unchecked all inputs
                        document
                            .querySelectorAll('input[name="contabilidad"]')
                            .forEach((input) => {
                                input.checked = false;
                            });
                        // setPrecioContabilidad(e.target.value);
                        PropHandleChangeContabilidad(e);
                    }}
                >
                    <option value="">Usuarios </option>
                    <option value={precios.contabilidad.incremento1}>15</option>
                    <option value={precios.contabilidad.incremento2}>20</option>
                    <option value={precios.contabilidad.incremento3}>25</option>
                    <option value={precios.contabilidad.incremento4}>30</option>
                    <option value={precios.contabilidad.incremento5}>35</option>
                    <option value={precios.contabilidad.incremento6}>40</option>
                    <option value={precios.contabilidad.incremento7}>45</option>
                    <option value={precios.contabilidad.incremento8}>50</option>
                </select>
            </div>

            <div className={styles.inputBox}>
                <div className={styles.moduleTotal}>
                    {
                        // format to mexican pesos
                        new Intl.NumberFormat('es-MX', {
                            style: 'currency',
                            currency: 'MXN',
                        }).format(PropPrecioContabilidad)
                    }
                </div>
                {}
            </div>
        </div>
    </>
);

}

PARENT COMPONENT |||||

import React, { useState, useRef } from 'react';
import ContabilidadT from '../modulos/tradicional/ContabilidadT';


export default function Tradicional() {
    //? -----------------------------------------------------------------------------------------------------------------------
    // contabilidad module state starts here
    const [precioContabilidad, setPrecioContabilidad] = useState(0);
    const handleChangeContabilidad = (e) => {
        setPrecioContabilidad(e.target.value);
        if (
            document.querySelectorAll('input[name="contabilidad"]:checked').length >=
            1
        ) {
            document.getElementById('contabilidadSelect').options.selectedIndex = [0];
        }
    };
    // contabilidad module state ends here
    //? -----------------------------------------------------------------------------------------------------------------------

    //? 

    // get total price
    const getTotal = () => {
        const total =
            Number(precioContabilidad) +
            Number(precioBancos) +
            Number(precioNomina) +
            Number(precioInventarios) +
            Number(precioCuentasPorCobrar);

        if (total === 0) {
            return 0;
        } else {
            return total;
        }
    };

    // input ref props

    return (
        <>
            <h1>Tradicional Cotizador</h1>
            <Titulos />
            <ContabilidadT
                PropPrecioContabilidad={precioContabilidad}
                PropHandleChangeContabilidad={handleChangeContabilidad}
            />

            <div>
                <h2>Total</h2>
                <h3>
                    {new Intl.NumberFormat('es-MX', {
                        style: 'currency',
                        currency: 'MXN',
                    }).format(getTotal())}
                </h3>
            </div>
        </>
    );
}

Answer 1

I can see you have imported useRef hook You can use useRef to track the child components check the answers here

React - use ref in component AND pass it to parent in props