CopyCat React

Get Help React.js
#1

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

#2 
// 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
}
#3 
// 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'));
#4 
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
}
#5

Are you sure you passed data from CopyCatContainer to CopyCat on a prop named input?

#6

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;
#7

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.

#8

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

#9

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.

#10

yes i have tried that but its still not rendering anything

#11

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

#12

thanks that made it work but im not getting it where is the problem

#13

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.