Codecademy export

CopyCat.js

import React from 'react';
import ReactDOM from 'react-dom';
import {styles}  from '../styles';

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

CopyCatContainer.js

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

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}
          value = {value}
         handleChange = {handleChange}
         />
    );
  };
}


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 = 20;
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
}