Stuck in react 36/47

Hi, I can’t pass that exercise because everytime gives me this error:

When MagicEightBall is first mounted to the DOM, it should return an empty p element.

When text is entered into the input element and the button is clicked, the MagicEightBall component should return a p element that contains a random element from the possibleAnswers array. (Test timed out)

console output:
Uncaught Error: Method “text” is meant to be run on 1 node. 2 found instead.

I also tried to resolve it using Chrome and copying the exact code of the hints section but it doesn’t work


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]; // << change code here
  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 */ }
<p>
{this.answer}          
</p>
        { /* change code above this line */ }
      </p>
    </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36.

Challenge: Use Advanced JavaScript in React Render Method

Link to the challenge:

Hello! Welcome to the forum :grin:!

Read the comments I made:

<p>
  { /* change code below this line */ }
  <p>{/* This one and... */ }
    {this.answer} {/* The 'this' keyword is not required here and causes a problem */}
  </p> {/* this one are duplicate */}
  { /* change code above this line */ }
</p>
1 Like

Thank you!, I also tried without the “this” key but i didn’t saw the duplicate “p” tag.

1 Like