score:1

data in react flows only in one direction, so there is no way that you pass data from child to parent. but you can pass a function from parent to child that takes some arguments that you can then pass in the function call inside child component.

i would do something like this. first in the parent component i would create a function that has a "invalid" argument which will be boolean.

class parent extends react.component {
  constructor(props){
    super(props);
    this.state = {data: [
      {type: "text", value: ""},
      {type: "email", value: "not valid email"}
    ]};

  isanychildinvalid(invalid){
    if (invalid) {
      dosomething();
    }
  }
  
  ...
}

then i would pass this function to the child component via props.

  render(){
    <div>
      this.state.data.map((item, index) => <child validatechild={this.isanychildinvalid} key={index} data={item} />
      <button disabled={isanychildinvalid()} label="send">
    </div>
  }

then in the child component i would call the function passed from parent inside tellparentthatiamvalidornot function.

  tellparentthatiamvalidornot(valid){
    this.props.validatechild(valid);
  }


Related Query

More Query from same tag