Help! I Can't submit React: Use Advanced JavaScript in React Render Method challenge

freeCodeCamp Support
1

I keep getting this error even when I’ve done the correct thing. When text is entered into the inputelement and the button is clicked, the MagicEightBall component should return a p element that contains a random element from the possibleAnswers array.

2

it is impossible to know what’s wrong if you don’t show your code

3

oh yeah! my bad. here it is:

const inputStyle = {
  width: 235,
  margin: 5
}

class MagicEightBall extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userInput: '',
      randomIndex: ''
    }
    this.ask = this.ask.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  ask() {
    if (this.state.userInput) {
      this.setState({
        randomIndex: Math.floor(Math.random() * 20),
        userInput: ''
      });
    }
  }
  handleChange(event) {
    this.setState({
      userInput: event.target.value
    });
  }
  render() {
    const possibleAnswers = [
      'It is certain',
      'It is decidedly so',
      'Without a doubt',
      'Yes, definitely',
      'You may rely on it',
      'As I see it, yes',
      'Outlook good',
      'Yes',
      'Signs point to yes',
      'Reply hazy try again',
      'Ask again later',
      'Better not tell you now',
      'Cannot predict now',
      'Concentrate and ask again',
      'Don\'t count on it',
      'My reply is no',
      'My sources say no',
      'Most likely',
      'Outlook not so good',
      'Very doubtful'
    ];
    const answer = possibleAnswers[this.state.randomIndex];
    return (
      <div>
        <input
          type="text"
          value={this.state.userInput}
          onChange={this.handleChange}
          style={inputStyle} /><br />
        <button onClick={this.ask}>
          Ask the Magic Eight Ball!
        </button><br />
        <h3>Answer:</h3>
        <p>
          { /* change code below this line */ }
            {answer}
          { /* change code above this line */ }
        </p>
      </div>
    );
  }
};

here is the link >> challenge link

4

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it 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.

Note: Backticks are not single quotes.

markdown_Forums

1 Like
5

and what’s the link to the challenge? that’s pretty essential too

6

I just edited the reply with the code block to include the challenge link.

7

is that the code you have in the editor?
it passes for me

8

Yeah, I know its correct because after I kept getting the same error I was frustrated and checked the hints and then I saw that I was right but it still isn’t passing me for some reason.

9

what’s your browser? do you have any extension?

10

I’m using Safari version 13.0.4. I don’t have any extensions

11

try chrome, does it pass?

12

Yes it does! Thanks once again.