React - Use a Ternary Expression for Conditional Rendering

Tell us what’s happening:
Why isn’t the page rendering the output? generally, it does output code outcome on the right side but for the following code it is not, the code seems right when I render only buttonOne it should display the button, but it is not.

Is it supposed to do that?

Your code so far

const inputStyle = {
  width: 235,
  margin: 5

class CheckUserAge extends React.Component {
  constructor(props) {
    // Change code below this line
    this.input = '';
    this.userAge = '';
    // Change code above this line
    this.submit = this.submit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  handleChange(e) {
      userAge: ''
  submit() {
    this.setState(state => ({
      userAge: state.input
  render() {
    const buttonOne = <button onClick={this.submit}>Submit</button>;
    const buttonTwo = <button>You May Enter</button>;
    const buttonThree = <button>You Shall Not Pass</button>;
    return (
        <h3>Enter Your Age to Continue</h3>
        <br />
        {/* Change code below this line */}
        {/* Change code above this line */}

Your browser information:

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

Challenge: React - Use a Ternary Expression for Conditional Rendering

Link to the challenge:

You are not quite creating the state correctly:

Hope this helps

I’m not seeing use of a ternary operator in here.

this might help:
Conditional (ternary) operator - JavaScript | MDN (

correct, I just wanted to see the raw output of what page looks like when I just do buttonOne

ah, then the other comment touches on what’s going on more

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