React. How to get radio button value from another component

Issue

This Content is from Stack Overflow. Question asked by TonyI

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>
        </>
    );
}



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?