This question has been asked before but it seems like all answers I find deal with class-based components.
I have a component with an onPress handler function as follows:
<Text id="someId" onPress={(e) => console.log(e)}>
Some Text
</Text>
I need to get 'someId' logged out consistently. Currently, I can only get it via:
console.log(e.target._internalFiberInstanceHandleDEV.memoizedProps.id)
This doesn't feel right. Is this the official way of getting the id, or are there different ways? The ones I can find use 'this' which seems to be undefined in functional components.
Related
I have an application developed for internal users. The home page of the app has at least 30 input fields.
<TextInput onChangeText={onChangeNumber} value={number}/>
I have onchangeText for all the 30 inputs, in the future I might add more fields. I don't think adding onchange to all the fields is the best way to do it. How can I optimize the approach? Are there any 3rd party packages where it doesn't re-render for every input change and only captures data on submit?
the way I handle large forms is this,
Store your form data in an object using useState like this,
const [formData, setFormData] = useState({name: "", age:""})
you can pass "onChangeText" like this,
<TextInput
value={formData.name}
onChangeText={value => setFormData(prev => { return { ...prev, name: value } })}
/>
I would suggest creating a separate component for "TextInput", so you can also handle validations in it.
Try using onEndEditing, as per docs:
onEndEditing
Callback that is called when text input ends.
So just changing to
<TextInput onEndEditing={onChangeNumber} value={number}/> should do
There are a few other alternatives on the docs, you might check to see the one that fits you better.
https://reactnative.dev/docs/textinput#onendediting
You should try formik + yup.
I am using it in several projects and this is the best way to manage little and big forms!
React native passing multiple styles from parent to child, component, which method is more used? What is the difference?
Rest parameter type,
<Text style={{...styles.title, ...props.style}}>{props.children}
I also found this syntax here:
using array,
<Text style={[styles.title, props.style]}>{props.children}
There are no differences between the two examples. However, the second way is the standard way to combine styles as mentioned in the react-native documentation.
The style prop can be a plain old JavaScript object. That's what we usually use for example code. You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.
I'm learning React Native and am creating a practice app using React Native Boilerplate. I'm trying to pass arguments from a component through to a reducer, but after trying everything I can think of, I am still unable to do so. I'll use the unchanged boilerplate's Counter component as an example.
My current solution has this and works fine:
<TouchableHighlight onPress={increment}>
<Text style={styles.text}>+</Text>
</TouchableHighlight>
However, I want to pass arguments, which would look like this:
<TouchableHighlight onPress={increment(argument)}>
<Text style={styles.text}>+</Text>
</TouchableHighlight>
The latter doesn't work. The function is undefined. My containers, actions, and reducers are in the same format as they appear in the sample app. How do I fix this?
This should work
<TouchableHighlight onPress={(argument)=>increment(argument)}>
Use an arrow function to add a parameter to the call
In react-navigation module of React Native you can define your screens like screen: props => <SignOutScreen {...props} />, and pass up navigators as export default (props) => <RootNavigator {...props} />
You may want to do it to pass extra props and as far as navigation itself is concerned it is working fine.
But when you wire up redux as described in the docs everything breaks with different errors like cant' get getStateForAction of undefined and others.
I have not seen in the official docs that you can define screens like functions but I see folks are doing this so you need either make sure it works with redux as well, or state that this feature is unofficial and does not support at least redux integration.
The guys from react navigation closed this issue 5 mins after openning presumably to keep the issue number low.
https://github.com/react-community/react-navigation/issues/2923#issuecomment-342471629
if anyone tried to use redux with screens as function please let me know how to achieve it.
I've been banging my head trying to figure out what mapProps and controlProps is in the react element in react-redux-form library.
I'm reading the documentation here but I can't figure out what it means or where it's use cases would be.
<Control
mapProps={\{
customChange: (props) => props.change,
}}
model="..."
/>
<Control.text
model="..."
component={CustomInput}
controlProps={\{errors: 'errors for CustomInput'}}
/>
Could someone please explain it in simple English?
Thank you in advance!
mapProps is used when the control has a component props defined - i.e. is wrapping a custom component. Normally it would just pass on its props to the custom component, assuming it will use the same props names. But if say the custom component uses a different naming convention then this is a way to map the Control prop name to the custom component prop name.