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

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related