hi can some one explain why my code is not working i have looked at my code but cannot seem to understand were i have wrong
// Presentational Component
import React from 'react';
import {styles} from '../styles';
import PropTypes from 'props-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 = this.props.copying;
const toggleTape = this.props.toggleTape;
const value = this.props.input;
const handleChange = this.props.handleChange;
const name = this.props.name;
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}
onClick={toggleTape}
style={styles.ImgStyles}
/>
<p>{value && copying}</p>
</div>
);
};
}
CopyCat.propsTypes = {
copying: PropTypes.bool.isRequired,
toggleType: PropTypes.func.isRequired,
value: PropTypes.string.isRequired,
handleChange: PropTypes.func.isRequired,
name: PropTypes.string
}
// Container Component
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 CopyCatConatiner 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}
name={"Sam"}
/>
);
}
}
ReactDOM.render(<CopyCatConatiner />, document.getElementById('app'));
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
}
Are you sure you passed data from CopyCatContainer to CopyCat on a prop named input
?
hi i have changed the input to value but still not working
const value = this.state.value;
I have also changes the it in the copcat.js to
const value = this.props.value;
You called the state property input
in your CopyCatContainer component, so it was correct as this.state.input
in that file. Look here:
Even your handleChange() method in CopyCatContainer was setting the state of input
for that component.
You decided to send it to the CopyCat component on the value
property, so that’s why it needed to be accessed as this.props.value
from within CopyCat.
You should go back and consider the flow of data. Add some console.log() commands so you can verify the values you are expecting in the browser’s console. You can’t use the React Developer Tools extension from within the learning environment on Codecademy, so you need to take advantage of console.log() to help you troubleshoot.
hi thanks again so im passing the state inside the copycat conatiner correct down to the render, so my problem is in my copycat component
Maybe, but if you did make the change you mentioned above, then you are no longer passing it to CopyCat correctly either. This is only correct if you updated the name of the state property and updated your handleChange() method.
yes i have tried that but its still not rendering anything
Not rendering anything at all is a very big clue. In the Codecademy learning environment for React, that usually means it couldn’t even compile your code.
You’re also using the wrong name for the prop-types library
import PropTypes from 'props-types';
// ^ shouldn't be an s here
You’ll still need to do the rest of your troubleshooting after you get it rendering again
thanks that made it work but im not getting it where is the problem
Start your logging and troubleshooting techniques now. Follow the flow of data to make sure each component has the values you think they should. If they don’t, look at all the spots in the code that is touching that data to figure out why.