Toggle visibility of two components from buttons inside of them in React

Try this:

import React from 'react'

export default function Parent() {
    const[show,setShow]=useState(false);
    const handleChange=()=>{
        setShow(!show);
    }
    return (
        <div>
            {show ? <Component2 handleChange={handleChange}/> : <Component1 handleChange={handleChange}/>}
        </div>
    )
}

and inside Component1 have this:

import React, { useState } from 'react'

export default function Component1({handleChange}) {
    return (
        <div>
            <button onClick={handleChange}></button>
        </div>
    )
}

Similarly do it for Component2

Your parent component should keep track of the state:

import React, {useState} from 'react'

export default function Parent() {
    const [showChild, setShowChild] = useState(1);

    const showNextChild = () => {
        setShowChild( showChild === 1 ? 2 : 1 ); // set to 2 if already 1, else to 1
    }

    return (
        <div>
            { showChild === 1 && <Component1 handleChange={showNextChild} /> }
            { showChild === 2 && <Component2 handleChange={showNextChild} /> }
        </div>
    )
}

A few notes:

1. Your components are identical, so the duplication is unnecessary, but I assume the example is just contrived.

2. This assumes toggling 2 components back and forth. If you have more than 2 components you are "looping" through, you can instead increment the previous showChild state and then reset it to 0 if higher than the # of components you have.

3. The syntax you see, showChild === 1 && <Component1 ... uses the behavior of the && operator which actually returns the 2nd item it is evaluating if both are true. In other words, const isTrue = foo && bar; sets isTrue to bar, not true as you might expect. (You know, however, that bar is "truthy" in this case, so isTrue still works in future if statements and such.) The component is always truthy, so the effect is that the component is returned if the first part is true, otherwise it is not. It's a good trick for conditionally showing components.

You can do with state value and pass handleChange function ad props in the child component and in click on the button in child component call handleChange method under parent component and show hide based on state value.

import React from 'react'
    const [showChild, setshowChild] = useState(false);
    
    const handleChange = () => {
        setshowChild(!showChild);
    }
    
    export default function Parent() {
        return (
            <div>
                {showChild ? <Component2 handleChange = {handleChange}/> : <Component1 handleChange= {handleChange} />}
            </div>
        )
    }

You can manage the state in the parent and pass down a handler to the children

import React, { useState } from 'react'

const [currentView, setCurrentView] = useState('component1')

const changeCurrentView = (view) => setCurrentView(view)

const renderViews = () => {
  switch(currentView) {
    case 'component1':
      return <Component1 changeCurrentView={changeCurrentView} />
    case 'component2':
      return <Component2 changeCurrentView={changeCurrentView} />
    default:
      return <Component1 changeCurrentView={changeCurrentView} />
  }
}

export default function Parent() {
  return (
    <div>
      {renderViews()}
    </div>
  )
}

Other components

import React from 'react'

export default function Component1({ changeCurrentView }) {
  return (
    <div>
      <button onClick={() => changeCurrentView('component1')}></button>
    </div>
  )
}


export default function Component2({ changeCurrentView }) {
  return (
    <div>
      <button onClick={() => changeCurrentView('component2')}></button>
    </div>
  )
}

Try this. You can send information from child to parent with functions passed as a prop.

Parent Component:

const Parent = () => {
  const [show, setShow] = useState(true);
  const toggleVisibility = () => {
    setShow(!show);
  };
  return (
    <div>
      {show ? (
        <Child1 toggle={toggleVisibility}></Child1>
      ) : (
        <Child2 toggle={toggleVisibility}></Child2>
      )}
    </div>
  );
};

Child 1

const Child1 = (props) => {
  const { toggle } = props;
  return (
    <div style={{ width: '100px', height: '100px' }}>
      <button onClick={toggle}>Child 1's button</button>
    </div>
  );
};

Child 2

const Child2 = (props) => {
  const { toggle } = props;
  return (
    <div style={{ width: '100px', height: '100px' }}>
      <button onClick={toggle}>Child 2's button</button>
    </div>
  );
};