Validating tr tags in a table with React

Question

I have two components. The first is the parent and the second is rendered in the parent as tr tags, as lines in a table, they need validation. Because the tds tags contain inputs that need to be validated before the parent records their information (this part has not yet been implemented). What is the best way to do this using React? How to validate multiple child components? Follow the code of the parent component: I will omit some parts of the code in general for easy viewing

import React from "react";
import  ComboAjax  from "../Componentes/ComboAjax/comboAjax";
import  Row  from "../Componentes/Table/Row";
import  RowVazia  from "../Componentes/Table/RowVazia";
import { webServiceUrl } from "../constants/web-service";
import { authHeader } from "../helpers/headerAutenticacao";



class Timesheet extends React.Component {

    constructor() {
        super();

        this.state = {
            rows: [],
            rowsNovas: ['row']
        } 

        this.leituraSolicitacao = this.leituraSolicitacao.bind(this);
        this.inserRowNova = this.inserRowNova.bind(this);
    }
    leituraSolicitacao() {
        fetch(webServiceUrl + '/solicitacoes/' + localStorage.getItem("id") + "/201804", authHeader("POST"))
        .then(response => {
            if (response.ok) {
                return response.json();
            } 
        }).then(resposta => {
            this.setState({
                rows: resposta
            })
        })
        .catch(error => {
            console.error("Erro na leitura de solicitacoes.")
        })
    }

    inserRowNova() {
        this.setState((prevState, index) => ({    
            rowsNovas: [...prevState + 'row' + index]
        }));
    }

    componentDidMount() {
        this.leituraSolicitacao();
    }


    render() {
        return(
                    <tbody id="tbody_timesheet">

                        { 
                            this.state.rowsNovas.map((index) => {
                                return(
                                    <RowVazia key={index}/>
                                )
                            })
                        }
                    </tbody>

    )}
}

export default Timesheet

Follow the code of the component that is rendered in the parent component map:

import React from "react";
import InputMask from 'react-input-mask';
import ComboAjax from "../ComboAjax/comboAjax";
import { validaData } from "../../helpers/validaData";

class RowVazia extends React.Component {

    constructor() {
        super();

        this.state = {
           valorBotaoControle: 'SOLJAVA',
           idInputData: Math.random()
        }

        this.trocaControle = this.trocaControle.bind(this);
        this.validaData = this.validaData.bind(this);
    }

    trocaControle() {
        switch (this.state.valorBotaoControle) {
            case "SOLJAVA":
                this.setState({
                    valorBotaoControle: 'SOLMESTRA'
                })
                break;
            case "SOLMESTRA":
                this.setState({
                    valorBotaoControle: 'NÃO POSSUI'
                })
                break;    
            default:
                this.setState({
                    valorBotaoControle: 'SOLJAVA'
                })
                break;
        }
    }

    validaData() {
       validaData(this.state.idInputData)
    }

    render() {
        return(
            <tr>
                <td>
                    <InputMask style={{fontSize: '13px'}} onBlur={() => this.validaData(this.state.idInputData)}  className="form-control" id={this.state.idInputData} mask="99/99/9999">
                    </InputMask>
                </td>
                <td>
                    <button style={{fontSize: '13px'}} onClick={() => this.trocaControle()} className="btn btn-info btn-md btn-block"
                    value={this.state.valorBotaoControle}>{this.state.valorBotaoControle}</button>
                </td>
                <td>
                    <InputMask mask="9999/99-99999" className="form-control">
                    </InputMask>
                </td>
                <td>
                    <ComboAjax url="/projetos" valorId="id" nomeObjeto="descricao" classe="form-control" />
                </td>
                <td>
                    <InputMask maxLength="60" className="form-control" >
                    </InputMask>
                </td>
                <td>
                    <InputMask maskChar="99:99" className="form-control">
                    </InputMask>
                </td>
                <td>
                    <button onClick={() => this.validaData} className="btn btn-danger">
                        <span className="icon icon-bin2"></span>
                    </button>
                </td>
            </tr>
        )
    }

}

export default RowVazia;