Question 250317 in React native Question posted in
The official React Native documentation can be found here.

React native – Calling a function on all component dynanically generate from list

I am building a dynamic list of input components and when the user presses the submit button I would like to validate the input in every component by calling a function on each component so that each component can visually show that it has failed validation.

My component is "RegularTextInput" and I build it like this where it is used:

{carRegistrationNumbers.map((value, index) => (
    <RegularTextInput
        // add function to a list?
    />
);

I am new to React and React Native. How would I go about doing this? In my "RegularTextInput" how would I declare that function? And in the caller, should I maintain a list/array of all the components or functions somehow, so that I can call the function in all components when I press my submit button? Am I on the wrong path completely here 🙂

Thank you
Søren

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I am not using forms thus the

    onSubmitEditing

    is never called. My solution was to use

    onEndEditing

    and then call

    Keyboard.dismiss()

    to trigger the onEndEditing. That did the trick for me.


  2. 0

    I think this would solve your problem. You have to declare the function inside the component itself.

    const RegularTextInput = () => {
     const validateHandler = () => {
       if (!name.length) {
         setError("Can't be blank.")
       }
     }
return (
  <TextInput {...otherProps} onSubmitEditing={validateHandler} />
)}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search