Use a Ternary Expression for Conditional Rendering - HtML inside Javascript variable

JavaScript
1

Tell us what’s happening:
Inside the render ( ) before the return statement, the javascript variables buttonOne, buttonTwo and buttonThree are storing html elements. I am not understanding how we can store HTML as these variables are not JSX elements. Thank you for your time guys.

Your code so far



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

class CheckUserAge extends React.Component {
  constructor(props) {
    super(props);
    // change code below this line

    // change code above this line
    this.submit = this.submit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    this.setState({
      input: e.target.value,
      userAge: ''
    });
  }
  submit() {
    this.setState({
      userAge: this.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 (
      <div>
        <h3>Enter Your Age to Continue</h3>
        <input
          style={inputStyle}
          type="number"
          value={this.state.input}
          onChange={this.handleChange} /><br />
        {
          /* change code here */
        }
      </div>
    );
  }
};

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering

2

These are not html elements. All html-like elements inside a jsx file are actually react elements. Here’s a screenshot from their docs.

48
48966×391 43.5 KB

3

Okay… Thanks for correcting that. But even then… can JSX element be assigned to a javascript variable. The code inside the render method before the return statement are treated as pure Javascript right ?? Im having a confusion at that part.

Untitled
Untitled1152×732 74.9 KB

4

Everything inside a jsx file is either javascript, or react elements/components.

You only need the curly braces if you wish to use javascript inside a react element/component.

Otherwise it’s vanilla javascript.

In brief, in a jsx file

  • any html-like syntax is a react element/component
  • javascript is valid only outside of a react element/component
  • javascript inside a react element/component needs curly braces.

JSX is actually syntactic sugar over React.createElement. All this means is that the code you write looks ‘sweeter to the eye’ than the code the js engine receives.

So it looks like html, but under the hood it’s actually just a function that returns an object. and that’s what your code gets compiled to.

const Component = React.createElement(
  div,
  [...props],
  [...children]
)

// same as
const Component = <div {...props} {...children} />

This syntactic sugar just lets us use jsx elements as if they were html elements, making the development experience ‘sweeter’.

If there’s still something I haven’t made clear, make sure to reply to my message or @ me. Otherwise I won’t get notified of the update.

2 Likes
5

@JM-Mendez This was really helpful. I understood it now. Thanks a lot :slight_smile:

1 Like