0

I have a react project. I have 3 routes, which are /, /adult, /children.

I have created the states and onChange handlers in App.js files and passing them as props to the sub components and updating the value in one of the sub component but the updated value not showing in the other child component

Project Link : https://codesandbox.io/s/trusting-haslett-pz2by?file=/src

When I am incrementing adult value, its updating in /adult page, but I have opened /children route in another tab but the props value isn't getting updated there

How can I achieve this?

  • `I have opened /children route in another tab` As in "browser tab"? Tabs don't communicate with eachother; they're running separate code. – Nicholas Tower Jan 21 '21 at 14:48
  • yes!the state is passed from parent component, It will only work when parent component is executed – S.N.B Jan 21 '21 at 14:52
  • if you want to set state in one component and then use in other , you can check the following answer https://stackoverflow.com/questions/65785994/how-to-share-data-from-one-react-native-component-to-another-component/65786436#65786436 – S.N.B Jan 21 '21 at 14:54
  • @ShahidNawaz I am sorry to tell, its in react native is any resource available for react? its kind of lengthy and for me its over whelming –  Jan 21 '21 at 15:12
  • this method applies to react as well, component and states logic remains same in react-native and react, you need to use redux with react, if you want pass state to any component in theproject – S.N.B Jan 21 '21 at 15:20

1 Answers1

0

If you're running the same page in two different browser tabs, these are completely unrelated. Each has its own memory, and executes its own javascript, and one cannot affect the other, unless you involve a server or websockets.

Your current code works fine, as long as you stay in the same tab. Your state is in the App component and will be available to both the adults route and the child route. To test this, try adding a link from your adult page to your children page. You can increment a few times on the adult page, then link to the children page and see the same value

import React from "react";
import { Link } from "react-router-dom";
const Adult = (props) => {
  return (
    <div>
      <button onClick={props.incAdult}>Increment</button>
      <p> No of Adults : {props.adults} </p>
      <Link to="/children">Test</Link>
    </div>
  );
};
export default Adult;
Nicholas Tower
  • 72,740
  • 7
  • 86
  • 98
  • So there's no way to update value across pages(components) that a state's value is updated through out simultaneously? –  Jan 21 '21 at 15:11
  • I'm confused. As far as I can tell, your code is already working. I recommended adding a link between the pages so that you can see that it's working. Are you trying to display multiple pages at the same time, instead of moving between them? – Nicholas Tower Jan 21 '21 at 15:15
  • see, whenever I am incrementing the adult value in adult page (which in a separate tab) , the updated value must be displayed in children page(which is opened in separate tab) also –  Jan 21 '21 at 15:46
  • Getting tabs to communicate with eachother is the same problem as getting your phone and your laptop to communicate with eachother. Is that something you need? If so, the short version is that you will need to set up a server and have both of your pages use websockets to communicate with that server so they can get realtime updates about what the other browser is doing. – Nicholas Tower Jan 21 '21 at 16:03
  • Oh, i can achieve this only by setting a server? for getting real time updates? –  Jan 21 '21 at 16:08
  • Between two completely different web browsers, yes, a server needs to be involved. Same goes for two tabs: they might be running on the same computer, but other than that they're completely separated. They have their own memory, their own event loop, etc. – Nicholas Tower Jan 21 '21 at 16:12
  • Thanks @Nicholas.Thank You So Much, I didn't even knew this –  Jan 21 '21 at 16:49