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);
}
Source: stackoverflow.com
Related Query
- ReactJS: render Parent in condition of childs
- Delay parent component render till all the child components render reactjs
- How to add Condition inside render method in reactjs
- How to render post in different layout getting from same parent component in reactjs
- ReactJS - Child components DO NOT render when imported component used, but DO when explicitly marked up in parent element
- unable to render lists of data while using class based component in both parent and child in reactjs
- Continuously watch for a condition to be true without render in ReactJs
- Render Table <tr> tag based on condition in ReactJs within map loop
- Condition inside render method in reactjs
- Parent Component losing state immediately after re render Reactjs
- ReactJS - Does render get called any time "setState" is called?
- ReactJS call parent method
- ReactJS render string with non-breaking spaces
- How do I render sibling elements without wrapping them in a parent tag?
- Function inside render and class in reactjs
- Passing data child to parent functional components in reactjs
- Execute javascript after reactjs render method has completed
- Datatables.net with ReactJS, render a ReactJS component in a column
- ReactJS - render called, but DOM not updated
- ReactJS concurrent SetState race condition
- Reactjs How to insert react component into string and then render
- Reactjs - Adding ref to input in dynamic element render
- ReactJS modify parent state from child component
- how trigger event parent to child in Reactjs
- ReactJS how to render a component only when scroll down and reach it on the page?
- Reactjs Warning: input is a void element tag and must not have `children` or use `props.dangerouslySetInnerHTML`. Check the render method of null
- Why I am not able to render my ReactJS application using PhantomJS 2.1.1?
- How to re render parent component when anything changes in Child Component?
- Reactjs Render component dynamically based on a JSON config
- Render a component from outside ReactJS
More Query from same tag
- How to make mui button size larger than life?
- React Hooks Sending message at first in Websockets
- How to connect a 3rd party API to React through Express
- How to run again the clock, since the time returned by the API?
- Should a component's render method have return type React.ReactNode or JSX.Element?
- Ensuring each element of an array property conforms to custom shape in React
- Setting inline backgroundImage is not working in React
- React JS "onChange" function not working on iPad
- Need help styling MaterialUI MenuItem Component
- how to show custom values on x-axis in recharts?
- How can I set min time on a MUI TextField of type='time'?
- How can I ensure that my user goes to a specific path (written in the url) via React-Router-Dom without automatically going to the default home page?
- Unable to console event in select change and code performance issue ReactJS
- heroku deploy error, i can't understand Error Message
- Reactjs How to download file from Azure Storage Container
- Define Isomorphic React routes in Web API
- How to modify a list in ReactJS?
- Trying to filter and map to output unique values
- find method in enzyme does not return a single node though I search for an element with unique id
- React, onClick callback arguments
- BMI calculator written in react.js class needs to be clicked twice on the submit button to mutate some of the this.state values
- Warning: Expected `onClick` listener to be a function, instead got a value of `string` type
- Does passing objects as props interfere with componentWillReceiveProps?
- React Native componentDidUpdate props not connecting to main component?
- TS2322: Type 'HTMLElement | null' is not assignable to type 'HTMLButtonElement'. and other errors when enabling button on pressing terms checkbox
- React-Select Uncaught TypeError: Cannot read property 'value' of undefined
- React + Redux: Component does not update
- How to get FCM token?
- React Initializing and synchronizing state with backend
- Round last value in humanize-duration formatted value (React)