I'm using React-Bootstrap Carousel component inside react-visibility-sensor component, like this:
<VisibilitySensor>
{
({ isVisible }) => (
<Carousel
activeIndex={activeIndex}
controls={false}
interval={isVisible ? 3000 : null}
onSelect={this.handleChangeActiveIndex}
fade={fade}
>
{
images
}
</Carousel>
)
}
</VisibilitySensor>
When VisibilitySensor component's changed, isVisible will be changed and interval value will be changed to null (for stop carousel) or 3000.
But, currently, when VisibilitySensor component's changed, isVisible was changed, component was re-render but Carousel not start slide (on isVisible is true).
Is it a my some mistake?
Thanks.
Related
When the visible prop turn false, the render element is removed from the DOM, but all react components are still rendering. Why is this?
// my tippy
<Tippy
interactive
visible={isSortOpen}
render={() => <TableSort />}
appendTo={document.body}
onClickOutside={()=>setSortIsOpen(false)}
>
<SomeComponent />
</Tippy>
// my component
const SomeComponent = () => {
useInterval(()=>{
console.log("tick")
}, 300)
return <div id="my-component"/>
}
// useInterval removes the interval on unmount, but in the console,
// "tick" will continue to be printed although `visible` is set to `false`
// AND my `SomeComponent` is no longer in the DOM.
// the component can also be seen in react devtools
I have a parent component which holds a child component. The parent is getting its data from redux. The object in store looks something like the below:
//object in redux store
object :[{
item: {
name: 'item'1,
selected: false
},
item:{
name: 'item'1,
selected: false
}
}]
My Parent component contains a FlatList which renders the child component:
//parent component
<FlatList
data={this.props.object}
renderItem={( object ) => <Object object={object.item} />}
keyExtractor={object => object.id}
/>
My child component contains a button, which toggles the selected property of each item. The desired behavior is that the style of the button changes based on the value if the selected property. My child button component looks something like the below:
// child component
render(){
return (
<View>
<Text>{this.props.name}</Text>
<Button
title="toggle"
buttonStyle={{backgroundColor: this.props.selected? 'red' : 'green'}}
onPress={() => handling toggle by changing state in store, it works fine and
console.logs correctly}/>
</View>
);
}
After the button is toggled, the state of the object does change, and console.logs correctly, however the style of the button only updated when i go out and back into the page as if the child component is not updating.
How can i get the button style to update directly on button toggle? Thanks
More information would help, but my initial thoughts are that the toggled state might not be causing the FlatList component to pick up the changes, in order to trigger a re-render.
This can be resolved by the optional extraData prop that can be passed into your FlatList component
https://reactnative.dev/docs/flatlist#extradata
it turns out the changes I was doing in my reducer did not trigger a component update due to the shallow equality comparison redux performs.
I fixed by returning this in my reducers
let obj = {...}
return { ...state, object: {...state.object}
instead of
let obj = {...}
return {...state, object: obj }
I want to change the state of a parent component from a child's TextInput.
The problem is every time it changes the parent state the component re-renders, the TextInput is blurred and the keyboard disappears.
I tried keeping all the logic in the some component and changing the parent state without passing props. Now I've tried extracting the InputText container and putting it into a new file, changing the parents' state and receiving the value through the props, that's not working either.
Here is the text field component:
export default (ProfileTextInput = ({
placeholder,
label,
handleChange,
name,
value
}) => {
return (
<View style={styles.inputComponent}>
<Text style={styles.labelText}>{label.toUpperCase()}</Text>
<TextInput
key={Math.random()}
placeholder={placeholder || ""}
value={value}
onChangeText={val => handleChange(val, name)}
/>
</View>
);
});
and this is how it's being used:
const [newUserData, setNewUserData] = useState({ ...userData });
const changeHandler = (value, name) => {
setNewUserData({ ...newUserData, [name]: value });
};
return(
<ProfileTextInput
label="Username"
defaultValue={newUserData.username}
name="username"
value={newUserData.username}
handleChange={changeHandler}
/>
)
I expected it to continue letting me type like a normal TextInput, but it's only typing one letter and losing focus.
Try removing the defaultValue props from your components.
defaultValue is just the initial value passed to an uncontrolled component. Since you're setting the input value with a change handler, that makes your input a controlled component, and so you should just set the value explicitly.
Read these articles for more details on the differences between these cases:
React forms and controlled components
Uncontrolled components
When I define a button in React Native as:
<Button ref="buttonRef" title="Button" onPress={this.buttonPressed}/>
And its onPress function as:
buttonPressed(){
this.refs.buttonRef.setNativeProps({color:"#ffffff"});
}
I get the following error:
this.refs.buttonRef.setNativeProps is not a function. (In
'this.refs.buttonRef.setNativeProps({
color: "#ffffff"
})', 'this.refs.buttonRef.setNativeProps' is undefined)
However, if I were to define any other type of component, e.g. text input as
<TextInput ref="userInputRef" value={"this is text"} />
With the function changing its props:
buttonPressed(){
this.refs.textRef.setNativeProps({color:"#ffffff"});
}
Everything changes correctly.
Is there a reason that the button component is unable to have its native props set through setNativeProps?
Button component is a simple custom component created from Touchable components and it doesn't have a ref property. You can check the source code of Button component here.
If you need to change properties of a component you should use state values for that.
Sample
buttonPressed = () => {
this.setState({color:"#ffffff"});
}
//....
<Button ref="buttonRef" color={this.state.color} title="Button" onPress={this.buttonPressed}/>
I am using Modal component from vue strap. I want to know if an action/method can be run if modalshow is false. Basically I want to do a status check and then refresh the page when the modal closes.
use watch in parent component:
watch: {
'showModal': function (newVal, oldVal) {
if(newVal == false)
doSomething();
}
},
when modal show status changes this event should fire up.
Remember to use twoWay binding in modal component for showModal:
<modal large :show.sync="showModal" effect="zoom">