export const Main = () => {
    const [title, setTitle] = useState('');
    
    return (
        <ChildComponent
            title={title}
            onChange={e => setTitle(e.target.value)}
        />
    );
};

export const ChildComponent = ({ title, onChange }) => {
    return (
        <Box component="form" onSubmit={() => {}} noValidate mt={5}>
            <TextField
                fullWidth
                id="title"
                label="Title"
                name="title"
                autoComplete="title"
                autoFocus
                color="primary"
                variant="filled"
                InputLabelProps={{ shrink: true }}
                value={title}
                onChange={onChange}
            />
        </Box>
    );
};

const getSubsets = arr => arr.reduce((prev, curr) => prev.concat(prev.map(k => k.concat(curr))), [[]]);

// Examples
getSubsets([1, 2]);     // [[], [1], [2], [1, 2]]
getSubsets([1, 2, 3]);  // [[], [1], [2], [1, 2], [3], [1, 3], [2, 3], [1, 2, 3]]

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

// Get the text that the user has selected
const getSelectedText = () => window.getSelection().toString();
getSelectedText();

const insertionSort = arr =>
  arr.reduce((acc, x) => {
    if (!acc.length) return [x];
    acc.some((y, j) => {
      if (x <= y) {
        acc.splice(j, 0, x);
        return true;
      }
      if (x > y && j === acc.length - 1) {
        acc.splice(j + 1, 0, x);
        return true;
      }
      return false;
    });
    return acc;
  }, []);
  
insertionSort([6, 3, 4, 1]); // [1, 3, 4, 6]

const hammingDistance = (num1, num2) =>
  ((num1 ^ num2).toString(2).match(/1/g) || '').length;
  
hammingDistance(2, 3); // 1