import {useState} from 'react'

const Komponent1 = ({text})=><p>{text}</p>


const Komponent2 = ({text, setToggle})=>{
  return(
  <>
    <p>{text}</p>
    <button onClick={
      ()=>{
        console.log(text)
        setToggle && setToggle(p=>!p);
      }
      }> console log i zmień </button>
  </>
  )
}


const Toggle = ({Component1, component1Props, Component2, component2Props})=>{

  const [toggle, setToggle] = useState(false);

  return(
    <>
    { toggle ?
    <Component1 {...component1Props} />
    : <Component2 {...component2Props} setToggle={setToggle} />}

    <button onClick={()=>setToggle(p=>!p)}>Zmień</button>
    </>
  )
}


export default function App() {

  return (
    <div className="App">

      <Toggle
      Component1={Komponent1}
      component1Props={{text: "Komponent 1"}}
      Component2={Komponent2}
      component2Props={{text: "Komponent 2"}}
      />

    </div>
  );
}