I dont understand p tag thing i was trying to put p tag around const answer but its not working, i have tried this like p tag but its not working

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

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'
  ];
 <p>
  const answer = possibleAnswers[this.state.randomIndex];
 
 
 </p> // Change this line
  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 */}

        {/* Change code above this line */}
      </p>
    </div>
  );
}
}
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36

Challenge: Use Advanced JavaScript in React Render Method

Link to the challenge:

You didn’t tell us what’s going on. Please edit your post so we know how to help you.

Please put your question in the body of the thread and not the title.


JSX goes inside the return. There is already a p element for you to use. Use the value of answer as you were shown in the challenge Render State in the User Interface Another Way.

  1. Remove the p element you added around the code.

  2. Inside the p element in the return (the one with comment blocks) put the answer variable inside curly braces {}.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.