Advanced JSX

Question 1

Grammar in JSX is mostly the same as in HTML, but there are subtle differences to watch out for. For example, in html it’s common to use class as an attribute name, however in JSX you can’t use the word class, what do you use instead?

Answer 1

You have the to use className as the attribute name, like so:

const heading = <h1>Color</h1>;

Question 2

In JSX when you write a self closing tag what must you include?

Answer 2

const bear = <img></img>;

Question 3

When you inject JS into JSX, that JS is part of the same environment as the rest of the JS in your file. That means you can access variables while inside of a JSX expression, how would this look like? (Give Example)

Answer 3

const myName = ‘Scott’;

ReactDOM.render(

<h1>Hey, {myName}</h1>

,
document.getElementById(‘app’)
);

Question 4

How can you write conditionals, if you can’t inject an if statement into JSX?

Answer 4

You just write an if statement, but don't inject it into JSX. So writing an if/else statement outside of the JSX tags, this would look like so:
const pics = {
kitty: '#',
doggy: '#'
};

let img:

if (coinToss) {
img = <img>;
} else {
img = <img>;
}

ReactDOM.render(
img,
document.getElementById(‘app’)
);

Question 5

There is an easier/ more compact way to write conditionals in JSX, other than using if/ else statements, what is it and give example.

Answer 5

You can use a ternary operator, like so:

const img = <img></img>;

Question 6

Another way to write conditionals in React is by using the && operator. It is not React specific, but it shows up in React quite often. Give an example using this conditional && and give explain when it works best.

Answer 6

The && operator works best when you want a piece of code to run sometimes, but not all the time, like so:

const judgemental = Math.random() < 0.5;

const favoriteFoods = (

<ul>
{ !judgemental &amp;&amp; <li>Nacho Cheez</li> }
</ul>

);

Question 7

If you want to create a list of JSX elements, what would be your best bet? An array method hint hint. (Give Example)

Answer 7

const peopleLis = people.map(person => 
<li> {person} </li>);

Question 8

When you assign a list element a key attribute, the value is a little tricky. As .map() loops through each item in your array you would want each array item to have a different key value. How could you do this?

Answer 8

const peopleLis = people.map(person => 
<li> {person} </li>
);