How to validate tr tags in a table with React

I have two components. The first is the parent and the second is rendered in the parent as tr tags, like rows in a table, they need validation. Because tds tags contain inputs that need to be validated before the parent writes 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? The following is the code for the parent component: I'll 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

The component code that is rendered on the map of the parent component follows:

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;