Sorry guys, total beginner with react js here and could use some help.

I have 3 classes, an app that is just for my router, a header, and a main page.

All I want is when a button in the header is pressed, a set is called in the main page.

i dont see why something like this shouldnt work:

mainpage:

const [data, setdata] = useState([false]);

const state = () => setdata(false);

header: onClick={() => mainpage.setdata(true)}

it doesn't seem like it should be complicated but obviously, this doesn't work so I would appreciate any and all advice

CodePudding user response：

Whenever you need to modify/share state between sibling components, the easier approach is to move the state (useState) up to the parent component and then pass down both the state and the function to modify it, as props.

or you can use a state management library where you can dispatch actions from anywhere to modify the state.

CodePudding user response：

I'm a little confused by the question. From my understanding you want to set a toggle function to a button. such as

    const [data, setData] = useState(false]);
    
      function toggle(){
    setData(!data);
  };

  return (
    <>
        <button onClick={toggle}>Toggle Subjects</button>
    </>

React-router is normally used in creating a Navigation Bar for your app and I am not sure how it's related to the question, please clarify.