Copycat Project step 10/12

I really have tried all the different ways Ive thought of…How Im I supposed to write this logic

{if(this.props.copying)}

will indeed throw an error if you try it in your IDE. You can try this instead: **{this.props.copying &&

{value}

}**

It is similar to what you have done in the image tag. It will only show the value when copying evaluates to true.

If it still doesn’t work, raise the issue once again with the code and I will look into it for you.

1 Like

woow okay thanks lemme check that…

naah it still wont render …but after I get rid of the

tag it renders perfectly the only after I get rid of this

{this.props.copying && value}


Ive also tried it the way you had written

{this.props.copying && {value}}

Ok that’s it…what we were trying to achieve is completely unnecessary. Trying a conditional before rendering makes more sense. We were doing it the reverse way. Try this:

{this.props.copying &&

{value}

}

This will definitely work! If it still doesn’t, send me the whole code snippet and I will try to fix it.

Also remember to pass the variable/state which holds your value…if it’s value, then you do it as mentioned, if it’s something else replace that in place of {value}. You might be making this noob mistake. Just do look into it.

There is paragraph tag tho. I don’t know whether you can see or not…the chat is not rendering out the tags, I guess! :-))

Hello!

I am also having troubles with step 10 in this project.
I understand what is required, and I believe I have done everything correctly, however the copied text will not render to the screen.
I have tried this both through the Codecademy website and on my own system.
Can someone please find the bug in my code!!

CopyCat.js:

import React from 'react';
import PropTypes from 'prop-types';
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() {
    const copying = this.props.copying;
    const toggleTape = this.props.toggleTape;
    const input = this.props.input;
    const handleChange = this.props.handleChange;

    return (
      <div style={styles.divStyles}>
        <h1 style={{marginBottom: 40}}>Copy Cat {this.props.name ? this.props.name : 'Tom'}</h1>
        <input
          type='text'
          value={input}
          onChange={handleChange} />        
        <img
          style={styles.imgStyles}
          alt='cat'
          src={copying ? images.copycat : images.quietcat}
          onClick={toggleTape} />
        <p>{copying && input}</p>
      </div>
    );
  };
}

CopyCat.propTypes = {
  input: PropTypes.string.isRequired,
  toggleTape: PropTypes.func.isRequired,
  handleChange: PropTypes.func.isRequired,
  copying: PropTypes.bool.isRequired
};

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

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

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

  render() {
    const copying = this.state.copying;
    const toggleTape = this.toggleTape;
    const input = this.state.input;
    const handleChange = this.handleChange;

    return (
      <CopyCat
              copying={copying}
              toggleTape={toggleTape}
              value={input}
              onChange={handleChange} />
    );
  };
}

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

Use this logic {copying && value ? value : !value} to check if copying is true, value would show up then vice versa

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: 40}}>Copy Cat</h1>
          <input
          type='text'
          value={this.props.input}
          onChange={this.props.handleChange} />        
        <img 
          alt='cat'
          src={this.props.copying ? images.copycat : images.quietcat}
          onClick={this.props.toggleTape} style= {styles.imgStyles}
        />
        <p> {this.props.copying ? this.props.input : !this.props.input}</p>
      
      </div>
    );
  };
}

```[quote="muchemimuchiri686709, post:1, topic:545919, full:true"]
I really have tried all the different ways Ive thought of..How Im I supposed to write this logic![Screenshot (81)|690x388](upload://c5mc2SuKI4YULVXGONO2YY4wbil.png) ![Screenshot (80)|690x388](upload://afYeYgakoKuRcnoviWJnRSBQeH3.png)
[/quote]

i dont know why i cannot type in my input box? guys please help.

Hi! Not sure if you’ve fixed it but thought I’d reply because I made the same mistake!
In the CopyCatContainer file, you’re passing the function as onChange={handleChange} so either you should

  • change the received props in CopyCat to this.props.onChange or
  • change the CopyCatContainer’s prop to handleChange={handleChange}
1 Like

You might want to put your CopyCatContainer.js file here too! Till then maybe this reply could be helpful for you because I made a similar mistake while going through this project.

1 Like

ty so much , ananya. But still there is no rendering of what so ever i type in input box.

would you like to share your code ? That might help me :slight_smile:

You can copy your CopyCatContainer.js file here as well if you want further help.

1 Like

appreciate your kindness. Helped alot.

Hi!
Thanks for your reply. I’ve found my issue (now that I’ve learned to use the React developer tools a little better).
The issue ended up being the “value” attribute. For some reason that I don’t fully understand yet, the props were not being passed properly between the components, resulting in “value” being undefined. When I changed “value” to “input”, everything works.

1 Like

Ooh I see, seems to be the same issue. In CopyCatContainer.js:, has attributes copying, toggleTape, value, and onChange. So those are the names of the props received by the CopyCat component.
I’ve been trying to figure out my issues just console logging line by line :sweat_smile: - I should definitely learn to use the React developer tools better, good call.