Pass-a-callback-as-props

JavaScript
1

Hi

I am new to this forum so be gentle with me. I am after help with one of the react challenges ‘pass-a-callback-as-props’

When I run the test I get ‘Something went wrong please try later’ now sometimes this means there is something wrong with my code, other times, there is an actual bug. I have not found any bugs raised on this challenge.

Is anybody experiencing anything similar? Has anybody completed this challenge and can give me a hint? (Oh I also see that hints get a 404 not sure if this has been logged)

Thanks for any help you can provide

Andy

My code …

class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      inputValue: event.target.value
    });
  }
  render() {
    return (
       <div>
        <GetInput { 
            input: this.state.inputValue
              
handleChange: this.handleChange 
          
          }
          
          />
        
        <RenderInput {
             input: this.state.inputValue
            
          }
          
          />
        
          
          
       </div>
    );
  }
};

class GetInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Get Input:</h3>
        <input
          value={this.props.input}
          onChange={this.props.handleChange}/>
      </div>
    );
  }
};

class RenderInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Input Render:</h3>
        <p>{this.props.input}</p>
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36.

Link to the challenge:

1 Like
2

I have noticed that /*handleChange: this.handleChange */ was commented out, I was just trying something. The code still fails the same way when I remove the comments. I just thought I would save all your time replying that I have commented out a portion of the code that would cause the fail.

Cheers

Andy

3

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

1 Like
4

I have solved my issue, it was me being a dumb user and staring at the code for too long

render() {
return (

    <GetInput input =  {this.state.inputValue}
          
                    handleChange = {this.handleChange } />
    
    <RenderInput input =  this.state.inputValue }/>
); }

I had my input and handleChange inside {} which in hindsight is an obvious mistake!

5

what is wrong with this ??

class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      inputValue: event.target.value
    });
  }
  render() {
    return (
       <div>
        { /* change code below this line */ }
        <GetInput input={this.state.inputValue} />
        <RenderInput input={this.state.inputValue}/>
        { /* change code above this line */ }
       </div>
    );
  }
};

class GetInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Get Input:</h3>
        <input
          value={this.props.input}
          onChange={this.props.handleChange}/>
      </div>
    );
  }
};

class RenderInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Input Render:</h3>
        <p>{this.props.input}</p>
      </div>
    );
  }
};
6

It looks like you forgot to add handleChange in your GetInput tag.

7

I did the exact same thing, and stared at my code for too long also. :grin:

8

you lost the handleChange this callback to pass