Using label for focus

label-w-focus.jsx

const Component1 = () => (
  <div className='col-sm-2 col-xs-12 p-2 border border-primary'>
    <label for='myinput' className='btn btn-primary'>
      Click to focus
    </label>
  </div>
);

const Component2 = () => (
  <div className='col-sm-10 col-xs-12 p-2 border border-primary'>
    <input id='myinput' type='text' className='form-control' />
  </div>
);

export default function App() {
  return (
    <div className='container'>
      <h1 className='text-center'>Label for Focus</h1>
      <div className='row'>
        <Component1 />
        <Component2 />
      </div>
    </div>
  );
}