chore: update lang tags on code blocks

curriculum/challenges/english/03-front-end-libraries/react/access-props-using-this.props.english.md

@@ -85,7 +85,7 @@ class ResetPassword extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<ResetPassword />, document.getElementById('root'))
 ```
 
@@ -97,7 +97,7 @@ ReactDOM.render(<ResetPassword />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class ReturnTempPassword extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/add-comments-in-jsx.english.md

@@ -56,7 +56,7 @@ const JSX = (
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(JSX, document.getElementById('root'))
 ```
 
@@ -68,7 +68,7 @@ ReactDOM.render(JSX, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 const JSX = (
 <div>
   <h1>This is a block of JSX</h1>

curriculum/challenges/english/03-front-end-libraries/react/add-event-listeners.english.md

@@ -85,7 +85,7 @@ class MyComponent extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<MyComponent />, document.getElementById('root'))
 ```
 
@@ -97,7 +97,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class MyComponent extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/add-inline-styles-in-react.english.md

@@ -66,7 +66,7 @@ class Colorful extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<Colorful />, document.getElementById('root'))
 ```
 
@@ -78,7 +78,7 @@ ReactDOM.render(<Colorful />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 const styles = {
   color: "purple",
   fontSize: 40,

curriculum/challenges/english/03-front-end-libraries/react/bind-this-to-a-class-method.english.md

@@ -76,7 +76,7 @@ class MyComponent extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<MyComponent />, document.getElementById('root'))
 ```
 
@@ -88,7 +88,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class MyComponent extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.english.md

@@ -82,7 +82,7 @@ class GateKeeper extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<GateKeeper />, document.getElementById('root'))
 ```
 
@@ -94,7 +94,7 @@ ReactDOM.render(<GateKeeper />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class GateKeeper extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/compose-react-components.english.md

@@ -132,7 +132,7 @@ class Vegetables extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<TypesOfFood />, document.getElementById('root'))
 ```
 
@@ -144,7 +144,7 @@ ReactDOM.render(<TypesOfFood />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class Fruits extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/create-a-complex-jsx-element.english.md

@@ -76,7 +76,7 @@ tests:
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(JSX, document.getElementById('root'))
 ```
 
@@ -88,7 +88,7 @@ ReactDOM.render(JSX, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 const JSX = (
 <div>
   <h1>Hello JSX!</h1>

curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.english.md

@@ -84,7 +84,7 @@ class ParentComponent extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<ParentComponent />, document.getElementById('root'))
 ```
 
@@ -96,7 +96,7 @@ ReactDOM.render(<ParentComponent />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 const ChildComponent = () => {
   return (
     <div>

curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-form.english.md

@@ -152,7 +152,7 @@ class MyForm extends React.Component {
 
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<MyForm />, document.getElementById('root'));
 ```
 
@@ -164,7 +164,7 @@ ReactDOM.render(<MyForm />, document.getElementById('root'));
 
 <section id='solution'>
 
-```js
+```jsx
 class MyForm extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-input.english.md

@@ -75,7 +75,7 @@ class ControlledInput extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<ControlledInput />, document.getElementById('root'))
 ```
 
@@ -87,7 +87,7 @@ ReactDOM.render(<ControlledInput />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class ControlledInput extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/create-a-react-component.english.md

@@ -76,7 +76,7 @@ class MyComponent extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<MyComponent />, document.getElementById('root'))
 ```
 
@@ -88,7 +88,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class MyComponent extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/create-a-simple-jsx-element.english.md

@@ -51,7 +51,7 @@ const JSX = <div></div>;
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(JSX, document.getElementById('root'))
 ```
 
@@ -63,7 +63,7 @@ ReactDOM.render(JSX, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 const JSX = <h1>Hello JSX!</h1>;
 ```
 

curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.english.md

@@ -73,7 +73,7 @@ class StatefulComponent extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<StatefulComponent />, document.getElementById('root'))
 ```
 
@@ -85,7 +85,7 @@ ReactDOM.render(<StatefulComponent />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class StatefulComponent extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.english.md

@@ -67,7 +67,7 @@ const MyComponent = function() {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<MyComponent />, document.getElementById('root'))
 ```
 
@@ -79,7 +79,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 const MyComponent = function() {
   // Change code below this line
   return (

curriculum/challenges/english/03-front-end-libraries/react/define-an-html-class-in-jsx.english.md

@@ -52,7 +52,7 @@ const JSX = (
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(JSX, document.getElementById('root'))
 ```
 
@@ -64,7 +64,7 @@ ReactDOM.render(JSX, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 const JSX = (
 <div className = 'myDiv'>
   <h1>Add a class to this div</h1>

curriculum/challenges/english/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.english.md

@@ -74,7 +74,7 @@ function Frameworks() {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<Frameworks />, document.getElementById('root'))
 ```
 
@@ -86,7 +86,7 @@ ReactDOM.render(<Frameworks />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 const frontEndFrameworks = [
   'React',
   'Angular',

curriculum/challenges/english/03-front-end-libraries/react/introducing-inline-styles.english.md

@@ -62,7 +62,7 @@ class Colorful extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<Colorful />, document.getElementById('root'))
 ```
 
@@ -74,7 +74,7 @@ ReactDOM.render(<Colorful />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class Colorful extends React.Component {
   render() {
     return (

curriculum/challenges/english/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.english.md

@@ -58,7 +58,7 @@ const JSX = (
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(JSX, document.getElementById('root'))
 ```
 
@@ -70,7 +70,7 @@ ReactDOM.render(JSX, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 const JSX = (
 <div>
   <h2>Welcome to React!</h2> <br />

curriculum/challenges/english/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.english.md

@@ -126,7 +126,7 @@ class Controller extends React.Component {
 
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<Controller />, document.getElementById('root'));
 ```
 
@@ -138,7 +138,7 @@ ReactDOM.render(<Controller />, document.getElementById('root'));
 
 <section id='solution'>
 
-```js
+```jsx
 class OnlyEvens extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/override-default-props.english.md

@@ -65,7 +65,7 @@ class ShoppingCart extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<ShoppingCart />, document.getElementById('root'))
 ```
 
@@ -77,7 +77,7 @@ ReactDOM.render(<ShoppingCart />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 const Items = (props) => {
   return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
 }

curriculum/challenges/english/03-front-end-libraries/react/pass-a-callback-as-props.english.md

@@ -104,7 +104,7 @@ class RenderInput extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<MyApp />, document.getElementById('root'))
 ```
 
@@ -116,7 +116,7 @@ ReactDOM.render(<MyApp />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class MyApp extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/pass-an-array-as-props.english.md

@@ -97,7 +97,7 @@ class ToDo extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<ToDo />, document.getElementById('root'))
 ```
 
@@ -109,7 +109,7 @@ ReactDOM.render(<ToDo />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 const List= (props) => {
   return <p>{props.tasks.join(', ')}</p>
 };

curriculum/challenges/english/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.english.md

@@ -93,7 +93,7 @@ class Calendar extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<Calendar />, document.getElementById('root'))
 ```
 
@@ -105,7 +105,7 @@ ReactDOM.render(<Calendar />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 const CurrentDate = (props) => {
   return (
     <div>

curriculum/challenges/english/03-front-end-libraries/react/pass-state-as-props-to-child-components.english.md

@@ -80,7 +80,7 @@ class Navbar extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<MyApp />, document.getElementById('root'))
 ```
 
@@ -92,7 +92,7 @@ ReactDOM.render(<MyApp />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class MyApp extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/render-a-class-component-to-the-dom.english.md

@@ -115,7 +115,7 @@ const Vegetables = () => {
 <section id='solution'>
 
 
-```js
+```jsx
 class TypesOfFood extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/render-conditionally-from-props.english.md

@@ -226,7 +226,7 @@ class GameOfChance extends React.Component {
 
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<GameOfChance />, document.getElementById('root'));
 ```
 
@@ -238,7 +238,7 @@ ReactDOM.render(<GameOfChance />, document.getElementById('root'));
 
 <section id='solution'>
 
-```js
+```jsx
 class Results extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/render-html-elements-to-the-dom.english.md

@@ -62,7 +62,7 @@ const JSX = (
 <section id='solution'>
 
 
-```js
+```jsx
 const JSX = (
 <div>
   <h1>Hello World</h1>

curriculum/challenges/english/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.english.md

@@ -63,7 +63,7 @@ var ReactDOMServer = { renderToString(x) { return null; } };
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<App />, document.getElementById('root'))
 ```
 
@@ -75,7 +75,7 @@ ReactDOM.render(<App />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class App extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.english.md

@@ -69,7 +69,7 @@ class MyComponent extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<MyComponent />, document.getElementById('root'))
 ```
 
@@ -81,7 +81,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class MyComponent extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface.english.md

@@ -68,7 +68,7 @@ class MyComponent extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<MyComponent />, document.getElementById('root'))
 ```
 
@@ -80,7 +80,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class MyComponent extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/render-with-an-if-else-condition.english.md

@@ -73,7 +73,7 @@ class MyComponent extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<MyComponent />, document.getElementById('root'))
 ```
 
@@ -85,7 +85,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class MyComponent extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/review-using-props-with-stateless-functional-components.english.md

@@ -76,7 +76,7 @@ var PropTypes = {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<CampSite />, document.getElementById('root'))
 ```
 
@@ -88,7 +88,7 @@ ReactDOM.render(<CampSite />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class CampSite extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/set-state-with-this.setstate.english.md

@@ -79,7 +79,7 @@ class MyComponent extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<MyComponent />, document.getElementById('root'))
 ```
 
@@ -91,7 +91,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class MyComponent extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/use--for-a-more-concise-conditional.english.md

@@ -73,7 +73,7 @@ class MyComponent extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<MyComponent />, document.getElementById('root'))
 ```
 
@@ -85,7 +85,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class MyComponent extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.english.md

@@ -11,7 +11,7 @@ forumTopicId: 301414
 <section id='description'>
 Before moving on to dynamic rendering techniques, there's one last way to use built-in JavaScript conditionals to render what you want: the <dfn>ternary operator</dfn>. The ternary operator is often utilized as a shortcut for <code>if/else</code> statements in JavaScript. They're not quite as robust as traditional <code>if/else</code> statements, but they are very popular among React developers. One reason for this is because of how JSX is compiled, <code>if/else</code> statements can't be inserted directly into JSX code. You might have noticed this a couple challenges ago &mdash; when an <code>if/else</code> statement was required, it was always <em>outside</em> the <code>return</code> statement. Ternary expressions can be an excellent alternative if you want to implement conditional logic within your JSX. Recall that a ternary operator has three parts, but you can combine several ternary expressions together. Here's the basic syntax:
 
-```js
+```jsx
 condition ? expressionIfTrue : expressionIfFalse;
 ```
 
@@ -200,7 +200,7 @@ class CheckUserAge extends React.Component {
 
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<CheckUserAge />, document.getElementById('root'));
 ```
 
@@ -212,7 +212,7 @@ ReactDOM.render(<CheckUserAge />, document.getElementById('root'));
 
 <section id='solution'>
 
-```js
+```jsx
 const inputStyle = {
   width: 235,
   margin: 5

curriculum/challenges/english/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.english.md

@@ -205,7 +205,7 @@ class MagicEightBall extends React.Component {
 
 <div id='jsx-teardown'>
 
-```js
+```jsx
 var possibleAnswers = [
   'It is certain',
   'It is decidedly so',
@@ -239,7 +239,7 @@ ReactDOM.render(<MagicEightBall />, document.getElementById('root'));
 
 <section id='solution'>
 
-```js
+```jsx
 const inputStyle = {
   width: 235,
   margin: 5

curriculum/challenges/english/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.english.md

@@ -157,7 +157,7 @@ class MyComponent extends React.Component {
 
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<MyComponent />, document.getElementById('root'));
 ```
 
@@ -169,7 +169,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'));
 
 <section id='solution'>
 
-```js
+```jsx
 class MyComponent extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.english.md

@@ -152,7 +152,7 @@ class MyToDoList extends React.Component {
 
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<MyToDoList />, document.getElementById('root'));
 ```
 
@@ -164,7 +164,7 @@ ReactDOM.render(<MyToDoList />, document.getElementById('root'));
 
 <section id='solution'>
 
-```js
+```jsx
 const textAreaStyles = {
   width: 235,
   margin: 5

curriculum/challenges/english/03-front-end-libraries/react/use-default-props.english.md

@@ -53,7 +53,7 @@ const ShoppingCart = (props) => {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<ShoppingCart />, document.getElementById('root'))
 ```
 
@@ -65,7 +65,7 @@ ReactDOM.render(<ShoppingCart />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 const ShoppingCart = (props) => {
   return (
     <div>

curriculum/challenges/english/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.english.md

@@ -84,7 +84,7 @@ var PropTypes = {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<ShoppingCart />, document.getElementById('root'))
 ```
 
@@ -96,7 +96,7 @@ ReactDOM.render(<ShoppingCart />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 const Items = (props) => {
   return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
 };

curriculum/challenges/english/03-front-end-libraries/react/use-react-to-render-nested-components.english.md

@@ -89,7 +89,7 @@ class TypesOfFood extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<TypesOfFood />, document.getElementById('root'))
 ```
 
@@ -101,7 +101,7 @@ ReactDOM.render(<TypesOfFood />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 const TypesOfFruit = () => {
   return (
     <div>

curriculum/challenges/english/03-front-end-libraries/react/use-state-to-toggle-an-element.english.md

@@ -11,7 +11,7 @@ forumTopicId: 301421
 <section id='description'>
 Sometimes you might need to know the previous state when updating the state. However, state updates may be asynchronous - this means React may batch multiple <code>setState()</code> calls into a single update. This means you can't rely on the previous value of <code>this.state</code> or <code>this.props</code> when calculating the next value. So, you should not use code like this:
 
-```js
+```jsx
 this.setState({
   counter: this.state.counter + this.props.increment
 });
@@ -19,7 +19,7 @@ this.setState({
 
 Instead, you should pass <code>setState</code> a function that allows you to access state and props. Using a function with <code>setState</code> guarantees you are working with the most current values of state and props. This means that the above should be rewritten as:
 
-```js
+```jsx
 this.setState((state, props) => ({
   counter: state.counter + props.increment
 }));
@@ -27,7 +27,7 @@ this.setState((state, props) => ({
 
 You can also use a form without `props` if you need only the `state`:
 
-```js
+```jsx
 this.setState(state => ({
   counter: state.counter + 1
 }));
@@ -129,7 +129,7 @@ class MyComponent extends React.Component {
 
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<MyComponent />, document.getElementById('root'));
 ```
 
@@ -141,7 +141,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'));
 
 <section id='solution'>
 
-```js
+```jsx
 class MyComponent extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/use-the-lifecycle-method-componentdidmount.english.md

@@ -86,7 +86,7 @@ class MyComponent extends React.Component {
 
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<MyComponent />, document.getElementById('root'));
 ```
 
@@ -98,7 +98,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'));
 
 <section id='solution'>
 
-```js
+```jsx
 class MyComponent extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/use-the-lifecycle-method-componentwillmount.english.md

@@ -68,7 +68,7 @@ class MyComponent extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<MyComponent />, document.getElementById('root'))
 ```
 
@@ -80,7 +80,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class MyComponent extends React.Component {
   constructor(props) {
     super(props);

curriculum/challenges/english/03-front-end-libraries/react/write-a-react-component-from-scratch.english.md

@@ -54,7 +54,7 @@ tests:
 <section id='solution'>
 
 
-```js
+```jsx
 // Change code below this line
 class MyComponent extends React.Component {
   constructor(props) {

curriculum/challenges/english/03-front-end-libraries/react/write-a-simple-counter.english.md

@@ -75,7 +75,7 @@ class Counter extends React.Component {
 ### After Test
 <div id='jsx-teardown'>
 
-```js
+```jsx
 ReactDOM.render(<Counter />, document.getElementById('root'))
 ```
 
@@ -87,7 +87,7 @@ ReactDOM.render(<Counter />, document.getElementById('root'))
 <section id='solution'>
 
 
-```js
+```jsx
 class Counter extends React.Component {
   constructor(props) {
     super(props);