React - Use Advanced JavaScript in React Render Method

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.

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'
    ];
    
    ask = () => {
    const randomIndex = Math.floor(Math.random() * this.possibleAnswers.length);
    this.setState({ randomIndex });
  };

  componentDidMount() {
    this.ask();
  };
    
    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>
    );
  }
}

Your browser information:

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

Challenge: React - Use Advanced JavaScript in React Render Method

Link to the challenge:

The React challenges seem broken right now so that might be why you changed so much code, but your code is not correct either way.

You shouldn’t create methods inside the render method. All you have to do is use the this.state.randomIndex with the possibleAnswers array to get back a random string. The string should be assigned to the answer variable and used/rendered in the JSX (as a variable).

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