Codecademy export

CopyCat.js

import React from 'react';
import { styles } from '../styles';
import PropTypes from 'prop-types';

const images = {
  copycat: 'https://content.codecademy.com/courses/React/react_photo_copycat.png',
  quietcat: 'https://content.codecademy.com/courses/React/react_photo_quietcat.png'
};


export default class CopyCat extends React.Component {
  
  render() {
    const copying = this.props.copying;
    const toggleTape = this.props.toggleTape;
    
    return (
      <div style={styles.divStyles}>
        <h1 style={{ marginBottom: 80 }}>Copy Cat {this.props.name ? this.props.name : "Tom"}</h1>

        <input
          type="text"
          value={this.props.value}
          onChange={this.props.handleChange} 
        />

        <img
          style={styles.imgStyles} 
          alt='cat'
          src={copying ? images.copycat : images.quietcat}
          onClick={toggleTape}
        />

        <p>{copying && this.props.value}</p>
      </div>
    );
  };
}

CopyCat.propTyles = {
  copying: PropTypes.bool.isRequired,
  toggleTape: PropTypes.func.isRequired,
  value: PropTypes.string.isRequired,
  handleChange: PropTypes.func.isRequired,
  name: PropTypes.string
}

CopyCatContainer.js

import React from 'react';
import ReactDOM from 'react-dom';
import CopyCat from '../components/CopyCat';

class CopyCatContainer extends React.Component {
    constructor(props) {
    super(props);

    this.state = { 
      copying: true,
      value: ''
    };

    this.toggleTape = this.toggleTape.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  toggleTape() {
    this.setState({copying: !this.state.copying})
  }

  handleChange({ target }) {
    this.setState({ value: target.value });
  }
  
  render() {
    return(
      // <h1>hi</h1>
      <CopyCat copying={this.state.copying} toggleTape={this.toggleTape} value={this.state.value} handleChange={this.handleChange} name="Seb" />
    );
  };
}


ReactDOM.render(<CopyCatContainer />, document.getElementById('app'));

styles.js

const fontFamily = 'Comic Sans MS, Lucida Handwriting, cursive';
const fontSize = '5vh';
const backgroundColor = '#282c34';
const minHeight = '100vh';
const minWidth = 400;
const display = 'flex';
const flexDirection = 'column';
const alignItems = 'center';
const justifyContent = 'center';
const color = 'white';
const marginTop = '20px';
const width = '50%';

const divStyles = {
  fontFamily: fontFamily,
  fontSize: fontSize,
  color: color,
  backgroundColor: backgroundColor,
  minHeight: minHeight,
  minWidth: minWidth,
  display: display,
  flexDirection: flexDirection,
  alignItems: alignItems,
  justifyContent: justifyContent,
};

const imgStyles = {
  marginTop: marginTop,
  width: width
};

export const styles = {
  divStyles: divStyles,
  imgStyles: imgStyles
}