I’ve worked through the CopyCat project and everything seems to work fine…except the input field doesn’t accept text when I try to type.
I’ve reviewed the video and related forum posts and as far as I can tell I have the right solution. But the text box doesn’t respond. I’ve tried logging the props to console, and it is passing valid values.
What have I missed? Any help would be greatly appreciated!
Here is the code for reference:
CopyCat.js
import React from "react";
import { styles } from "../styles.js";
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, handleChange, value} = this.props;
console.log(this.props);
return (
<div style={styles.divStyles}>
<h1 style={{ marginBottom: "80px" }}>
Copy Cat {this.props.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>{copying && value}</p>
</div>
);
}
}
CopyCat.propTypes = {
copying: PropTypes.bool.isRequired,
toggleTape: PropTypes.func.isRequired,
handleChange: PropTypes.func.isRequired,
value: PropTypes.number.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 handleChange = this.handleChange;
const value = this.state.input;
return (<CopyCat
copying={copying}
toggleTape={toggleTape}
value={value}
onChange={handleChange}
/>);
}
}
ReactDOM.render(<CopyCatContainer />, document.getElementById('app'));