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