Как проверить текстовые поля в динамическом массиве

Question

У меня есть один материнский компонент и один дочерний компонент.В дочернем компоненте есть два текстовых поля (имя и адрес электронной почты) и кнопка добавления.Когда пользователь нажимает на кнопку add, будет добавлен новый набор тех же текстовых полей.Я сохраняю эти текстовые поля в моей материнской компоненте в массиве.Я хочу иметь функцию проверки, что проверки значений действительны.Если нет, я хочу, чтобы ошибка отображала истинное значение, чтобы пользователь мог видеть, что это поле неверно.Единственная проблема, которую я имею, состоит в том, чтобы выяснить, как дать правильному текстовому полю в массиве значение ошибки.Потому что теперь каждое текстовое поле получит значение ошибки.

Дочерний компонент:

import React from 'react';
import TextField from '@material-ui/core/TextField';
import AddIcon from '@material-ui/icons/Add';
import Minus from '@material-ui/icons/Delete';
import Button from '@material-ui/core/Button';

class People extends React.Component {
constructor(props){
    super(props);

}
render(){
    const {classes} = this.props; 
    return (
    <div>
        {this.props.people.map((person, index) => (
        <div key={person}>
            <div className="container">
                <div className="row">
                    <div className="col s2">
                            <Button 
                            mini
                            variant="fab" 
                            color="primary"
                            aria-label="minus" 
                            onClick={e =>
                            this.props.removeRow(index)}
                            data-toggle="tooltip"
                            >
                            <Minus/>
                        </Button>
                        </div>
                <div>
                <div className="col s5">
                        <TextField
                        name="name"
                        id="standard-dense"
                        label="Teamlid naam"
                        margin="dense"
                        value={person.name}
                        error={e =>
                        this.props.validate(e, index)}
                        onChange={e =>
                        this.props.onChange(e, index)}
                    />
                    </div>
                    <div className="col s5">
                        <TextField
                        name="email"
                        id="standard-dense"
                        label="Teamlid email"
                        margin="dense"
                        value={person.email}
                        error={e =>
                        this.props.validate(e, index)}
                        onChange={e =>
                        this.props.onChange(e, index)}
                    />
                    </div>
                </div>
                </div>
            </div>
        </div>
        ))}
        <div className="container">
            <div className="row">
                <div className="col s2">
                <Button 
                    mini
                    variant="fab" 
                    color="primary" 
                    aria-label="Add" 
                    onClick={this.props.addRow}
                    data-toggle="tooltip"
                    className="btn btn-xs btn-primary"
                    data-original-title="">
                    <AddIcon/>
                </Button>
                </div>
                <div className="col s5">

                </div>
                <div className="col s5">

                </div>
            </div>
        </div>

    </div>
    );
}
};

export default People;

Материнский компонент:

    import React, {Component} from 'react';
import People from './People';

class Form extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            people: []
        }
    }
    addRow = () => {
        this.setState(previousState => {
        return {
            people: [...previousState.people, {name: "", email: "", error:false}]
        };
        });
    };

    removeRow = index => {
        this.setState(previousState => {
        const people = [...previousState.people];
        people.splice(index, 1);
        return { people };
        });
    };

    //onChange functie van de teamleden rijen 
    onChange = (event, index) => {
        const { name, value } = event.target;

        this.setState(previousState => {
        const people = [...previousState.people];
        people[index] = { ...people[index], [name]: value };
        return { people };
        });
    };

    validate = (event,index) => {
        event.preventDefault();

        if(!event.target.value){
        return true;
        }else{
            return false;
        }
    };

    render(){
        const {classes} = this.props;
        return(
            <form>
                <People
                    addRow={this.addRow}
                    removeRow={this.removeRow}
                    onChange={this.onChange}
                    people={this.state.people}
                    validate={this.validate}
                />
                <button onClick={this.validate}>Validate</button>
            </form>
        );
    }
}

export default Form;

Я знаю, что для функции проверки, вероятно, нужен индекс неправильного текстового поля.Но я не знаю, как правильно это реализовать.