React component toggle demo

by Rocka

HTML

<div id="app"></div>

React

const SomeCompo = () => {
	const [text, setText] = React.useState('')
  return (
    <div>
      <p>some compo</p>
      <input type="text" placeholder="some" onInput={e => setText(e)}></input>
    </div>
  )
}

const AnotherCompo = () => {
	const [text, setText] = React.useState('')
  return (
    <section>
      <main>
        <div>another compo</div>
        <input type="text" placeholder="another" onInput={e => setText(e)}></input>
      </main>
    </section>
  )
}

const App = () => {
	const [compo, setCompo] = React.useState('some')
  
  const toggle = () => setCompo(compo === 'some' ? 'another' : 'some')
  
  return (
    <div>
      <div>
        <label htmlFor="toggle">Click to Toggle: </label>
        <button id="toggle" onClick={toggle}>Toggle</button>
      </div>
      { compo === 'some' ? <SomeCompo /> : <AnotherCompo /> }
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector("#app"))