I'm using react-native-testing-library on a react-native-elements Input component. The component shows the clear button while editing.
How can I tap the clear button to test the side effects?
This doesn't work:
const addressField = component.getByPlaceholder("Address");
addressField.clear();
// TypeError: addressField.clear is not a function
You can use the clear option.
handleSearchClear = () => {
this.setState({ query: "" })
}
....
<Input
placeholder='BASIC INPUT'
onClear={this.handleSearchClear}
value={this.state.query}
/>
OR You can use ref
this.input.clear();
...
<Input
placeholder='BASIC INPUT'
ref={ref => {this.input = ref;}}
value={this.state.query}
/>
Related
I have a react-native project in which I'm trying to handle the Switch component in a way that I can dynamically set an object with the boolean and its value, but I doesn't respond well:
Initially I use useEffect to process the data:
useEffect(() => {
let lista = {}
Object.entries(planes).forEach(([j, plan]) => {
lista[plan.nombre] = false
})
setSeleccion(lista)
}, []);
Then I loop through my data to load it and create the "card" dynamically with a Switch:
<Switch
offTrackColor="indigo.100"
onTrackColor="indigo.300"
onThumbColor="coolgray.500"
offThumbColor="indigo.50"
size="lg"
onToggle={(val) => toggleSwitch(val, plan.nombre)}
value={seleccion[plan.nombre]}
/>
Then toggle function:
const toggleSwitch = (val, plan) => {
setSeleccion({...seleccion, [plan]: val})
};
Now if I print the new array it shows as expected:
useEffect(() => {
console.log(seleccion)
}, [seleccion]);
But sadly the Switch remains as false visually (just goes back to its false state, so one cant toggle back to off/false).
If I do a toString(seleccion[plan.nombre]) in the render it shows [object Undefined]
Assuming that the Switch that you used is same/from react-native. There shouldn't be a prop called onToggle in Switch like you wrote below.
<Switch
offTrackColor="indigo.100"
onTrackColor="indigo.300"
onThumbColor="coolgray.500"
offThumbColor="indigo.50"
size="lg"
onToggle={(val) => toggleSwitch(val, plan.nombre)}
value={seleccion[plan.nombre]}
/>
instead, you need to use onValueChange
<Switch
offTrackColor="indigo.100"
onTrackColor="indigo.300"
onThumbColor="coolgray.500"
offThumbColor="indigo.50"
size="lg"
onValueChange={(val) => toggleSwitch(val, plan.nombre)}
value={seleccion[plan.nombre]}
/>
You can read more about the props in Switch here
I am trying to open a confirmation dialog when the button is clicked with React Admin. The button click name is 'handleSendItemsToUpdate'.
However the dialog is not opening.
Please find the code below:
const notify = useNotify();
const [open, setOpen] = React.useState(false);
const handleDialogClose = () => setOpen(false);
const handleSendItemsToUpdate = (props) => {
const handleConfirm = () => {
notify('Stuff is done.');
setOpen(false);
};
setOpen(true);
return (
<Fragment>
<SaveButton {...props} />
<Confirm
isOpen={open}
title="Update View Count"
content="Are you sure you want to reset the views for these items?"
onConfirm={handleConfirm}
onClose={handleDialogClose}
/>
</Fragment>
);
}
...
<Button className={classes.button} onClick={() => handleSendItemsToUpdate(props)}>Send Items To
Update</Button>
Any help is appreciated.
Thanks in advance!
Begum
The Confirm dialog is returned in the handleSendItemsToUpdate function, which is not rendered in the component (used in the DOM), that's why it cannot be shown.
You can put the return in the function to the return of component, and of course, it is only shown when the open state is true.
You can check for my demo here: https://codesandbox.io/s/peaceful-dewdney-6pil2?file=/src/App.js
How can I set focus to an Input in react native?
I have some inputs in my code:
<Input
value={CompName}
onChangeText={(text) => this.onChangeText(text, 'CompName')}
style={styles.valueText}
/>
<Input
value={Phone}
onChangeText={(text) => this.onChangeText(text, 'Phone')}
style={styles.valueText}
/>
...
And I validate if it is empty. IF empty, I set a Alert message and I would like to focus on the field. How can I do it?
myFunc = () => {
if(CompName === '' || CompName === undefined){
Alert.alert('Company Name is required.');
// set focus here??
return;
}
...
}
Thanks
firstly, in react-native, it is TextInput. and here is two methods exposed via the native element. they are .focus() and .blur() that will focus or blur the TextInput programmatically.
for use it, you have to set a ref for the TextInput.
<TextInput
value={this.state.compName}
onChangeText={(text) => this.onChangeText(text, 'CompName')}
style={styles.valueText}
ref={(input) => { this.compNameInput = input; }}
/>
myFunc = () => {
if(this.state.compName === '' || this.state.comNam === undefined){
Alert.alert('Company Name is required.');
// set focus here??
this.compNameInput.focus();
return;
}
...
}
I suggest use the state for the compName, like this.state.compName
I installed react-native-popup-dialog and I use it. I get the same warn when I enter the page with the component or when I open the popup dialog. Can you help me?
The error: "Warning: Failed prop type: Prop 'children' has type 'any' or 'mixed', but was not provided to 'PopupDialog'. Pass undefined or any other value"
<Dialog
visible = {this.state.addVisible}
rounded
width = {0.85}
dialogAnimation={new SlideAnimation({
slideFrom: 'bottom',
})}
footer = {
<DialogFooter>
<DialogButton
onPress = {() => {}}
textStyle = {styles.buttonText}
text = "Add"
/>
<DialogButton
onPress = {() => this.setState({addVisible: false})}
textStyle = {styles.buttonText}
text = "Cancel"
/>
</DialogFooter>
}
>
</Dialog>
According to issues:
It's type warning. children is required for DialogContent component.
Please add that like this:
<Dialog
visible={this.state.visible}
onTouchOutside={() => {
this.setState({ visible: false });
}}
>
<DialogContent>
{...}
</DialogContent>
</Dialog>
The event doesn't work in React-Native.
This is textInput.
<TextInput
id="name"
placeholder="name"
onChange = {this._inputChange}
/>
And This is the onChage function.
when i check with console.log(e.nativeEvent.id) writing in TextInput, it says undefined.
I guess that e.target.id can't use in React-native not React.
Could you recommend some idea?
_inputChange = (e) => {
let nextState = {};
console.log(e.nativeEvent.id)
nextState[e.nativeEvent.id] = e.nativeEvent.value;
this.setState(nextState);
}
This is how I handle this...
handleChange = (field, value) ={
this.setState({ [field]: value });
}
<TextInput
onChangeText={this.handleChange.bind(this, 'name')}
...
/>