score:2
you can pass a handler function from user to game via props:
var user = react.createclass({
...
handlescorechange: function(newscore) {
this.setstate({totalscore: newscore});
}
render: function () {
return (
<game handlescorechange={this.handlescorechange.bind(this)} />
)
}
});
var game = react.createclass({
...
updateuserscore: function() {
this.props.handlescorechange(this.state.score);
}
}
score:0
i did another hack while waiting for the answer which also works and interesting to share for those who want to be able to call all public functions at root level.
assuming you have croot class
var croot = react.createclass({ ... anypublicfunction(val){ ... } });
assign the result of render to a variable.
var rootcomponent = react.render( <croot >..users & games here ...</croot>, document.getelementbyid('lobbyarea') );
use that variable in any child node to call any public function of croot
rootcomponent.anypublicfunction(val);
score:1
in a situation like yours where two components do not share a common parent that can sensibly be used to store the change in state then you should use a store. i was unfamiliar with the concept until recently but people who know much more than me about these things recommend using reflux as it is a streamlined/simplified version of the flux architecture. its simply a place to store and manipulate data independent of any one component but accessible to those components as required.
edit: both flux and reflux seem to have been superseded by the excellent redux.
Source: stackoverflow.com
Related Query
- Modify state data for non-child react component
- onChange event for React child component to update state
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- Maintain the context data for each child component on React router change
- react wait for component to get state from store then render child
- Can't perform a React state update on an unmounted component when using custom hook for fetching data
- Modify the state with other component for the input in React
- What are React best practices for a child component to retrieve data over web sockets?
- React submitting data with child component state
- React Child Component Not Updating After Parent State Change
- React js change child component's state from parent component
- React Hook : Send data from child to parent component
- Reactjs: how to modify dynamic child component state or props from parent?
- Updating state with props on React child component
- React & Jest, how to test changing state and checking for another component
- Can a react component have multiple areas for child content?
- React shouldComponentUpdate() is called even when props or state for that component did not change
- Updating Parent Component State from Child Component with UseState React Hook
- ReactJS modify parent state from child component
- If the props for a child component are unchanged, does React still re-render it?
- passing data from child to parent component - react - via callback function
- Adding a click handler to React children for methods on the child component
- How to stop re render child component when any state changed in react js?
- How do I pass all state variables inside react hooks to my child component
- Unable to modify component props from React DevTools for Chrome
- Update a react state (array of objects) from a child component
- React | pass data from parent to child component
- Sharing state from parent to child component in React
- React JS this.props.data not defined in getInitialState for child component even though it is defined in render (and is defined in parent)
- React's setState(), data mutation for nested structures, why not modify state directly?
More Query from same tag
- I can't access "this.props.match.params.id" in React.js
- Problem with refreshing values in redux reducer. Why can't I create action and assign new values of state?
- I need to render a JSX element in Material-ui DataGrid
- reactjs: connected-router is not redirecting the user after push call is made
- Set generic route in node express application. (url/index, url/index2, url/index3...)
- How can I persist updated form data after submit?
- is map function is not working or fetched data have some problem
- react-table v7 within react-hook-form
- Need help implementing react-hook-form with Gatsby.js: form won't even post values to console
- React js - fetch API - TypeError: ticker.map is not a function
- React redux -how to get data in each components after the api response written in Reducer
- Reset multiselect drop-down menu react
- Display a loading text/spinner until a component is fully loaded(text,images...etc) in React
- Usage of GitHub Primer React Components with Octions
- Event propagation with React bubbling out of order
- Display a button when a checkbox is checked
- How to render components in react-router-dom with bundle.js file?
- re-render react component after i deleted from local storage?
- Load static svg file in react and add dynamic styling
- How we can give type to react element using TSX
- How to localstorage set users data (Problem with OPTIONS before post)
- Syntax error: Identifier 'App' has already been declared (11:7) Not posted anywhere else in the file
- React vs GWT for large scale web application
- react-router + nginx ingress refresh causes white screen when path is not "/"
- Cannot figure out how to customize a D3 based plot
- React componentDidUpdate not changing props.match.params on url change?
- call a same instance component multiple times ReactJS
- Plain Javascript replication to $.offset and $.position
- Change children class with parent onClick in React?
- ASP.NET with React error when trying to add a new controller: You need to enable JavaScript to run this app