CopyCat Project | Step 10 | Value won't render in paragraph

Evening!

Hoping someone might be able to point out where I may have gone wrong. I previously attempted the CopyCat project. However, I couldn’t get it to render anymore so I restarted.

This time, I have followed the video tutorial, exactly to my knowledge. Now on step 10, I can’t work out why it works in the video, but does not work for me. The issue is getting the paragraph to render the text from the input field.

Project: Link to CopyCat

CopyCat.js

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

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

  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}
        input={value}
        handleChange={handleChange}
      />
    )
  };
}


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

Many thanks,
Josh

Hi Josh,

could you provide two more details, please:

  1. A link to the project
  2. The error message from the console

Hi, I’ve edited in the Link to the project.

However, I’m unable to see an error occurring. Unless I’m missing something completely obvious.

If I manually enter something into the paragraph, it will display. And I tested the event handler to see if it was being called, and it will log to console every time i enter something into the input field.

My best guess is that whatever i’m typing into the input field is not being passed to ‘value’?

Add a console right below the line where you destructure the props in CopyCat.js:

console.log(value, this.props)

And then type something.

1 Like

I’ve tried this. So this is what I get back in console:

undefined Objectcopying: truehandleChange: ƒ ()input: ""toggleTape: ƒ ()key: (...)ref: (...)get key: ƒ ()get ref: ƒ ()__proto__: Object
CopyCatContainer.compiled.js:115 undefined {copying: true, input: "a", toggleTape: ƒ, handleChange: ƒ, …}copying: truehandleChange: ƒ ()input: "a"toggleTape: ƒ ()key: (...)ref: (...)get key: ƒ ()get ref: ƒ ()__proto__: Object
CopyCatContainer.compiled.js:115 undefined {copying: true, input: "as", toggleTape: ƒ, handleChange: ƒ, …}
CopyCatContainer.compiled.js:115 undefined {copying: true, input: "asd", toggleTape: ƒ, handleChange: ƒ, …}
CopyCatContainer.compiled.js:115 undefined {copying: true, input: "asdf", toggleTape: ƒ, handleChange: ƒ, …}

Okay, I think I’ve found the issue. I was passing ‘value’ as the ‘input’ for instead of ‘value’ for ‘value’.

Thank you for helping me highlight an issue to work from! :slight_smile:

1 Like