score:7
My advice:
Make sure that
ParentScreen
is connected through react-reduxconnect
function.If you want the title of
ParentScreen
to get updated automatically when the state of the store changes, connecting it won't be enough. You will have to use thecomponentWillReceiveProps
like you are doing in theChildScreen
Component.
Bonus: you could create a Higher Order Component for encapsulating that behaviour, like this:
const withTotalTitle = Component => props => {
class TotalTitle extends Component {
static navigationOptions = {
title: ({ state }) => `Total: ${state.params && state.params.count ? state.params.count : ''}`
};
componentWillReceiveProps(nextProps) {
if (nextProps.count != this.props.count) {
this.props.navigation.setParams({ count: nextProps.count });
}
}
render() {
return (
<Component {...props}/>
);
}
}
return connect(state => { count: state.total })(TotalTitle); // update this (I have no idea what the structure your state looks like)
};
And then you could use it like this:
const ChildScreen = withTotalTitle(({ increment }) => (
<View>
<Button onPress={() => increment()} title="Increment" />
</View>
));
const ParentScreen = withTotalTitle(() => (
<View>
<Text>Whatever ParentScreen is supposed to render.</Text>
</View>
));
score:1
You need to use props in order to pass the incremented value from child to parent component.
find the article below. It has a great example of communications between parent and child components.
http://andrewhfarmer.com/component-communication/
Thanks
score:2
OP, this is likely to be a problem with your redux implementation. Are you familiar with how redux implements its store? I see no mention here which means it is likely that your increment function is merely updating the child component's state instead of dispatching actions and reducers. Please have a look at a proper redux implementation like this one: https://onsen.io/blog/react-state-management-redux-store/
score:2
Have a common reducer for both parent and child. That way all the components(parent and child in your case) will get notified when the state changes.
Write a connect function for both parent and child. You'll receive the updated state in componentWillReceiveProps method. Use it as you please.
Hope it will help.
Source: stackoverflow.com
Related Query
- React Navigation: How to update navigation title for parent, when value comes from redux and gets updated in child?
- How to update specific value when the state is an array of objects - React
- How do I pass a prop to a react component yet not update that prop in the child when parent changes?
- how do i update state in react for updating the value of an object inside an array using array.map function
- How to update a useState which has an array, inside this array I have objects this objects will update when the input value will change in react js
- How to dynamically update values in Shopping Cart when one item value is changing in React JS using state in map function?
- How to type the initial state for react context when using useState as value
- How to update react testing library screen value when component is rendered based on condition?
- How to Update the parent component when child component updates in React
- How do I pass an object (created by a buttonClick event) from child to parent in react when already using props for a styled button
- How to update useState() when value changes in React
- How to update state of child component when it get called in map function from parent component React JS
- How do we know when a React ref.current value has changed?
- How to update webpack config for a react project created using create-react-app?
- React - How to detect when all sub-components of a parent component are visible to the user?
- How do I simulate browser events when writing tests for React js?
- CDN links for React packages and how to import it when using react using the scripts from CDN
- React and Socket.io: Able to get initial data - but view doesn't update when a new post comes in
- How to dynamically update the value for any input field with one event handler function, using hooks
- How to notify parent component of property change when using react hooks?
- How to trigger hot reloading for React when a package in node_modules is changed?
- How to update (re-render) the child components in React when the parent's state change?
- How can I replace screen with React Navigation for React Native
- How to specify a key for React children when mapping over an array
- How to update specific form field in formik when value changes in redux store?
- ReactJS - How can I implement pagination for react with keep state when route change?
- How to optimize React components with React.memo and useCallback when callbacks are changing state in the parent
- How does React re-use child components / keep the state of child components when re-rendering the parent component?
- How to properly update a react native swiper component when state changes?
- how to open non default browsers when doing npm start for a react project
More Query from same tag
- copytoclip board is not working with input filed having type hidden in react
- Click on <div> to focus <input> (React)
- How to write if else statement in reactJS when using useEffect?
- React "TypeError: Path must be a string. Received undefined" while upgrading dependencies
- React - Loop Through an Array - map of undefined
- TypeError: Cannot read properties of undefined (reading 'onSnapshot')
- Reusable Dropdown with React Hooks
- How to convert .then notation to an async function for aesthetic reasons in react
- React onFocus and onFocusCapture difference
- React Select Tag :: changing select options based on another select
- How do link my './Projects' file to app.js in React?
- TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_0___default.a.analytics is not a function
- Is it possible to change manifest.json file dynamically
- Using data from API JSON object using Axios and React
- React - pass props to specific child
- Enzyme find not working at finding component inside an already shallowed component
- Conditional handler based on slug in React Router?
- React TypeError: location is undefined
- Is there a way to make a dynamic text area in react
- Navigating (Routing) from one page to another in different folders in jsx Reactjs
- Can successfully open modal when I need to but cannot close it
- Components with large datasets runs slow on IE11/Edge only
- MUI <Autocomplete/> input label different from search option
- How to wrap React Hooks dispatch into function outside component
- React Component not correctly reloading on stateChange
- Loop through Array of object with the same data on some object and get it displayed once
- Reusing actions across multiple reducers in redux
- How to change width of Mui DatePicker v5
- Router is never used, but Routes do not work without importing it
- Cannot read property "replace" of undefined