How to show/hide multiple object using props from child to parent to child

Question

My idea of design is quit simple. I have sidebar in child components (Aside.js), and Main object display content (Main.js), all of them are use in ImportPage. In Aside I have three buttons and I want to show and hide content in Main.

Aside.js

const [value, setValue] = useState("Motywacja");
function changeMoto(){
  setValue("Motywacja");
}
function changeInspi() {
  setValue("Inspiracja");
}
function changeFinanse() { 
  setValue("Finanse");
 }

  return (
    <ProSidebar>
      <SidebarHeader style={headerStyle}>Podkategorie</SidebarHeader>
      <SidebarContent>
        <Menu iconShape="circle">
          <MenuItem onClick={changeMoto}>Motywacja</MenuItem>
          <MenuItem onClick={changeInspi}>Inspiracja</MenuItem>
          <MenuItem onCLick={changeFinanse}>Finansowanie</MenuItem>
        </Menu>
 
      </SidebarContent>
    </ProSidebar>

ImportPage.js

if(value == "motywacja"){
    <Main data="col1"/>   }
    if(value = "finanse"){ 
    return <main data="col2"/>
    }
    if value == "inspiracja") { return <main data="col3" />}

Main.js

if(data = col 3) return titlecol3 and contentcol3
if data = col 2 return ....

Answer 1

The concept I believe you're looking for is called Lifting State

Essentially, you pass the handler down as a prop from Import to Aside. This can be the set function of useState,

ie. [myState, setMyState] = useState(); can be passed as <Aside setMyState={setMyState} />

Now that the state is in Import you can easily pass it down to Main.js via props and display whatever you wish based on the value you set.

Answer 2

Hmm, your issue is very common and easy when using concept of props and state. First, you need to move value state to ImportPage component so that you can use on that component. About change value of value state when click button on Aside component, let pass setValue as props to Aside

<Aside onValueChange={setValue} />

Aside.js

export default function Aside(props) {
   function changeMoto(){
      props.onValueChange("Motywacja");
   }
   ....
}

On ImportPage component, you just need to render only one Main component and dynamic props:

<Main data={value === 'Motywacja' ? 'col1' : value === 'Finacel' ? 'col2' : 'col3' } />

Answer 3

you need to put the states in the parent component, in one component you set the value and in the other you use the value

ImportPage.js

const [value, setValue] = useState("Motywacja");

<Aside setValue={setValue}/>
<Main value={value}/>

of course you can set and use wherever you need just know that if brother components need the same state you need to initiate it in the parent

Aside.js

export const Aside = ({setValue}) => {
    function changeInspi() {
       setValue("Inspiracja");
    }

Main.js

export const Main = ({value}) => {
    if(value == "motywacja"){
      .........
    } else {
      ........
    }