CopyCat project passing props

Web Development Full-Stack
1

Hello, I am stuck on the new CopyCat project as part of an update to the React course.

https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/react-102-advanced-react-u/projects/copycat

I have split the code into presentational and container components, and by the end of step 4 the app should render, but it doesn’t. Perhaps I’ve gone wrong somewhere when passing props? Any help would be appreciated! Here is my code:

CopyCat.js

import React from 'react';

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 CopyCat extends React.Component {
  render() {
    return (
      <div>
        <h1>Copy Cat</h1>

        <img alt='cat'
          src={this.props.copying ? images.copycat : images.quietcat}
          onClick={this.props.toggleTape}
        />
      </div>
    );
  };
}

export default CopyCat;

CopyCatContainer.js

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

class CopyCatContainer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      copying: true
    };

    this.toggleTape = this.toggleTape.bind(this);
  }

  toggleTape() {
    this.setState({ copying: !this.state.copying })
  }

  render() {
    return <CopyCat copying={this.state.copying} toggleTape={this.toggleTape}/>
  };
}

ReactDOM.render(<CopyCatContainer />, document.getElementById('app'));
1 Like
2

I’ve hit the same wall, but apart from a semi-colon missing from this.setState statement I couldn’t find the reason for no render.

My container:

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

class CopyCatContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      copying: true,
      input: '';
      name: '';
    };
    this.toggleTape = this.toggleTape.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  toggleTape() {
    this.setState({ copying: !this.state.copying });
  } 

  handleChange(event) {
    this.setState({input: event.target.value});
  }

  render() {
    return <CopyCat name={this.state.name} copying={this.state.copying} toggle={this.toggleTape} value={this.state.input} {onChange={this.handleChange}/>;
  }
}

ReactDOM.render(<CopyCatContainer />, document.getElementById('app'));

My component…

import React from 'react';
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() {
    return (
      <div style={styles.divStyles}>
        <h1 style="marginBottom: 80">Copy Cat {this.props.name ? this.props.name : 'Tom'}</h1>
        <input type="text" defaultValue={this.props.value} onChange={this.props.onChange}/>
        <img style={styles.imgStyles} alt='cat'
          src={this.props.copying ? images.copycat : images.quietcat} onClick={this.props.toggle} />
          <p>{this.props.copying && this.props.value}</p>
      </div>
    );
  }
}

MyComponent.propTypes = {
  name: React.PropTypes.string
};
3

Same Issue for me too. Not Seeing the component render.

import React from 'react';

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() {
    return (
      <div>
        <h1>Copy Cat</h1>

        <img alt='cat'
          src={this.props.copying ? images.copycat : images.quietcat}
          onClick={this.props.toggleTape}
        />
      </div>
    );
  };
}

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


class CopyCatContainer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      copying: true
    };

    this.toggleTape = this.toggleTape.bind(this);
  }

  toggleTape() {
    this.setState({ copying: !this.state.copying })
  }

  render() {
    return (
      <CopyCat copying={this.state.copying} toggleTape={this.toggleTape}/>
    )
  };
}


ReactDOM.render(
  <CopyCatContainer />, 
  document.getElementById('app'));
4

Hi There

Why this is not working can someone please check and let us know

CopyCat Project

Thanks

1 Like
5

In your render function of CopyCatContainer, did you try putting the instance of CopyCat in a pair of parentheses for the return?

Example

render() {
return **(**CopyCat copying={this.state.copying} toggleTape={this.toggleTape}/>
**)**};
6

Yes but not working.

I copied the code from website to my laptop installed the react app their and it worked. somthing wrong with website. Even there is no video for help ==> it says in the help section follow the video if you STUCK :frowning:

copycat
copycat966×796 2.78 MB

7

Yea I’ve asked around and haven’t received much guidance on this.

8

Hi

I have just finished the project. Simply use your own system

  1. download the project
  2. then simply install the dependencies (use the the following command in your text editor in my case i have used VSCODE)
  3. Command is “npm install”

CopyCat React Project

Cheers

3 Likes
9

I believe, you don’t have to use parentheses unless your return contains more than a single line of JSX.

10

So it looks like a bug in Codecademy’s exercise.

1 Like
11

Yeah it’s bugged for me as well, hopefully someone from their team will see this thread.

12

One question, how do you download the project files from the lesson’s page? I don’t see anywhere to download and your github has the finished thing already .

13

I have used vscode (Code editor) => 1:installed react 2: create-react-app
Then copied the code from codecademy
then completed all the assignment steps.

I did it in rush so i left few unnecessary files there so i can finish the project :frowning:

Cheers

1 Like
14

Seriously? So, I’ll try in my computer.

15

same here! Can this be checked please? I prefer do it from codecademy website not my computer. I don’t have React on work’s computer.

Thanks

16

In the exercise it says to click run but there isnt a run button.

1 Like
17

Generous,
Thanks, I’ll compare your work to mine. I also use VS Code.
Gratitude,
Rick

19

Hi Everyone,

After many hours and with massive thanks to the Stack Overflow community, here is my completed solution! I’m not sure if I’ve got step 12 right, but I thought it might help out. Please feel free to share your feedback :slight_smile:

CopyCat-done
CopyCat-done1046×523 80.2 KB

4 Likes
20

Here is my code and it’s rendering in Codecademy perfectly. This is only through step 4
Hope this helps
CopyCat.js

import React from 'react';


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 CopyCat extends React.Component {
     
  render() {
    const copying = this.props.copying;
    const toggleTape = this.props.toggleTape
    
    return (
      <div>
        <h1>Copy Cat</h1>
        <img 
          alt='cat'
          src={copying ? images.copycat : images.quietcat}
          onClick={toggleTape}
        />
      </div>
    );
  };
}

export default CopyCat;

Here is the CopyCatContainer.js file code

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'
};


export class CopyCatContainer extends React.Component {
    constructor(props) {
    super(props);

    this.state = { 
      copying: true
    };

    this.toggleTape = this.toggleTape.bind(this);
  }

  toggleTape() {
    this.setState({copying: !this.state.copying})
  }
  
  render() {
    const copying = this.state.copying;
    const toggleTape = this.toggleTape
    
    return (
      <CopyCat 
      copying={this.state.copying}
      toggleTape={this.toggleTape}
       />
    );
  };
}


ReactDOM.render(<CopyCatContainer/>, document.getElementById('app'));
6 Likes
21

And for me… In fact, the last couple of lessons from this module had all of the amended code/answers in the editor when I clicked next to get to the next step. I think there must be something wrong with this lesson. I’m going to try to use my own system…

1 Like