React Native - How to loop over multiple rendered elements in a compnent?

Question

I need to loop over multiple Input elements rendered in my component and verify that they're not empty. As far as I know, there's no "Document.getElementsByClass" in React Native so I don't how to go about grabbing them, see code below...

const CreateAccountFormA = props => {

verifyFormIsCompleted = props => {

}


return (
    <Layout style={styles.mainContainer}>
        <Layout style={styles.inputsContainer}>
            <Input
            placeholder="Company"
            ></Input>
            <Input
            placeholder="First Name"
            ></Input>
            <Input
            placeholder="Last Name"
            ></Input>
            <Input
            placeholder="Address"
            ></Input>
            <Layout style={styles.parent}>
                <Input 
                style={styles.child}
                placeholder="City"
                ></Input>
                <Input
                style={{...styles.child, ...styles.centerChild}}
                placeholder="State"
                ></Input>
                <Input
                style={styles.child}
                placeholder="Zip"
                ></Input>
            </Layout>
        </Layout>
        <Layout style={styles.btnContainer}>
            <Button 
            onPress={verifyFormIsCompleted}
            >NEXT
          </Button>
        </Layout>
    </Layout>
)

}

Any help would be greatly appreciated, thanks!

react is quite a bit different than the normal DOM/HTML. With react you tell the renderer what to render, and the renderer converts it to HTML. You don't have access to the "nodes" at the time that react calls your component to render. What you have to do instead is use hooks to know when the input changes. It may be helpful to read the react docs on forms: reactjs.org/docs/forms.html — Kyle
– Kyle, Commented Oct 24, 2019 at 19:19
@mahadev, I'm using a styled component library called 'UI Kitten', that's why in my code they're "Input" elements and not "TextInput". The documentation only says they have a property called "TextInputProps". I think I'm in a little over my head, but thanks. — Fabian
– Fabian, Commented Oct 24, 2019 at 19:45

Nerdragen · Accepted Answer · 2019-10-24 19:55:18Z

There are 2 ways you can do this, the dumb way, and the proper React way. As you said, there isn't exactly a Document.getElementsByClass in React Native, but there are refs. Using your code, you can do

<Input placeholder="Last Name" ref={(ref)=>{this.lastNameInput = ref)}></Input>

You can store all the refs in an array or something the loop through all of them looking at the ref.value.

Now, the "proper" React way, is to use state. Declare this.state={lastName: ""} in your constructor, then add the onChangeText prop to your Input.

<Input placeholder="Last Name" onChangeText={(lastName)=>{this.setState({lastName}}}></Input>

Whenever your user change the value within that Input now, this.state.lastName would also be changed. Then, all you have to do is loop through your state, such as by doing

for(var field of this.state.keys()){
    if(this.state[field] === ""){
        //failed to validate
    }
}

Collectives™ on Stack Overflow

React Native - How to loop over multiple rendered elements in a compnent?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related