Copycat project cant type text in input?

[giga9366206445]

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 {
render() {
const {copying, toggleTape, value, handleChange, name} = this.props;

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

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(, 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
};

[selectall]

You’re accidentally passing undefined instead of your handleChange() method due to a typo

  render() {
    const copying = this.state.copying;
    const toggleTape = this.toggleTape;
    const value = this.state.input;
    const handleChange = this.handlechange; // undefined
    //                              ^
    return (
      <CopyCat
      copying = {copying}
      toggleTape = {toggleTape}
      value = {value}
      handleChange = {handleChange}
      />
    )

So when the CopyCat component attaches that to the onChange event for the input field, the code to change the state never gets run.

Normally, you’d be able to use the React Developer Tools extension to quickly diagnose a problem like this, but it isn’t effective in the learning environment embedded browser. Logging this.props and checking the browser’s console can still come in handy though, among other troubleshooting techniques.

[giga9366206445]

Thank you so much I was combing through the code again and again and getting stressed out. Fresh eyes.