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 class CopyCat extends React.Component {
    constructor(props) {
    super(props);

    this.state = { 
      copying: true
    };

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

  toggleTape() {
    this.setState({copying: !this.state.copying})
  }
  
  render() {
    const {copying,toggleTape,value,handleChange,name} = this.props;
    
    
    return (
      <div style={styles.divStyles}>
        <h1 style={{marginBottom:80}}>Copy Cat {name || "Tom"}</h1>
        <input 
          type='text'
          value={value}
          onChange={handleChange}
        />
        <img 
          alt='cat'
          src={copying ? images.copycat : images.quietcat}
          onClick={toggleTape}
          style={styles.imgStyles}
        />
        <p>{this.props.copying && value}</p>
      </div>
    );
  };
}
CopyCat.propTypes ={
  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.js'

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


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

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

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

  toggleTape() {
    this.setState({copying: !this.state.copying})
  }
  handleChange(e){
   this.setState({input:e.target.value})
  }
  
  render() {
    const copying = this.state.copying;
    const toggleTape = this.toggleTape
    const value = this.state.input
    const handleChange = this.handleChange
    
    return (
     <CopyCat 
      copying={copying}
      toggleTape={toggleTape}
      input={value}
       handleChange={handleChange}
      name='Ray'
     />
    );
  };
}


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
}