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>
    );
};

var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

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);

const ResponsiveCardImg = styled(Card.Img)`
    // For screens wider than 768px
    @media(min-width: 768px) {
        // Your responsive styles here.
    }

    // For screens smaller than 768px
    @media(max-width: 768px) {
        // Your responsive styles here.
    }
`

export default function App() {
    return (
        <MainContainer>
            <Container>
                <Card text='white' bg='dark' style={styles.mainCard}>
                <ResponsiveCardImg
                    style={styles.cardImage}
                    onClick={handleClick}
                    src={apeImage}
                    alt='Degenerate Ape Academy'
                />
                <Card.Body>
                    <Card.Title className='text-center' as='h2'>
                    {apeId}
                    </Card.Title>
                </Card.Body>
                </Card>
            </Container>
        </MainContainer>
    );
}

const reverse = str => str.split('').reverse().join('');
reverse('hello world');     
// Result: 'dlrow olleh'

const nums = [1, 2, 3];
const strs = Array.from('est');

nums.push(6);
nums.push(4, 9);
strs.unshift('t');

nums.length;                     // 6
nums[nums.length - 1];           // 9
strs[0];                         // 't'
strs[2];                         // 's'

nums.slice(1, 3);                // [2, 3]
nums.map(n => n * 2);            // [2, 4, 6, 12, 8, 18]
nums.filter(n => n % 2 === 0);   // [2, 6, 4]
nums.reduce((a, n) => a + n, 0); // 25

strs.reverse();                  // ['t', 's', 'e', 't']
strs.join('');                   // 'test'

const nums = new Set([1, 2, 3]);

nums.add(4);
nums.add(1);
nums.add(5);
nums.add(4);

nums.size;                       // 5
nums.has(4);                     // true

nums.delete(4);
nums.has(4);                     // false

[...nums];                       // [1, 2, 3, 5]

nums.clear();
nums.size;                       // 0

const items = new Map([
  [1, { name: 'John' }],
  [2, { name: 'Mary' }]
]);

items.set(4, { name: 'Alan' });
items.set(2, { name: 'Jeff' });

items.size;                      // 3
items.has(4);                    // true
items.get(2);                    // { name: 'Jeff' }

items.delete(2);
items.size;                      // 2

[...items.keys()];               // [1, 4]
[...items.values()];             // [{ name: 'John' }, { name: 'Alan' }]

items.clear();
items.size;                      // 0