<section id="description">
<p>В предыдущих задачах вы узнали, как выводить код JavaScript в код JSX, используя фигурные скобки, <code>{ }</code>, например, в таких задачах, как доступ к свойствам, передача свойств, доступ к состоянию, вставка комментариев в ваш код и дизайн ваших компонентов. Это все распространенные случаи использования JavaScript в JSX, но это не единственный способ использования кода JavaScript в компонентах React. Вы также можете писать JavaScript непосредственно в своих методах <code>render</code> перед оператором <code>return</code> , <strong><em>не</em></strong> вставляя его внутри фигурных скобок. Это связано с тем, что он еще не находится в коде JSX. Если вы хотите использовать переменную позже в коде JSX <em>внутри</em> оператора <code>return</code> , вы поместите имя переменной внутри фигурных скобок.</p>
<p>
  <b>Примечание:</b> JSX существует не только в рамках выполнения оператора <code>return</code>. Вообще <code>return</code> тут ничего не определяет более того, как только возврат значения. Границы JSX определяются тегами, написанными с использованием угловых скобок <code>&#x3C;</code> и <code>></code>, так же, как теги пишутся в HTML. Для примера:
  <pre class="language-jsx"><code>const string = "Some string value";
const content = &#x3C;div>String: {string}&#x3C;/div>
return content;</code></pre>
</p>
<p>Здесь константа <code>content</code> содержит в себе JSX-элемент, и чтобы внутри него вывести значение константы <code>string</code>, пришлось использовать фигурные скобки. В противном случае мы бы получили не значение константы, а простой текст <code>string</code>. То есть расценивайте JSX как шаблонизатор (коих много). Так будет проще и понятней.</p>
</section>

index

Использовать расширенный JavaScript в методе React render

Use Advanced JavaScript in React Render Method

The <code>MagicEightBall</code> component should exist and should render to the page.

<code>MagicEightBall</code>&apos;s first child should be an <code>input</code> element.

<code>MagicEightBall</code>&apos;s third child should be a <code>button</code> element.

<code>MagicEightBall</code>&apos;s state should be initialized with a property of <code>userInput</code> and a property of <code>randomIndex</code> both set to a value of an empty string.

When <code>MagicEightBall</code> is first mounted to the DOM, it should return an empty <code>p</code> element.

When text is entered into the <code>input</code> element and the button is clicked, the <code>MagicEightBall</code> component should return a <code>p</code> element that contains a random element from the <code>possibleAnswers</code> array.

front-end-libraries

React

RichText

Артем, все верно: реакт не выводит undefined. Так же он не выводит null, false, true. Можете сами попробовать вставить в любом месте шаблоа {false}, к примеру. 

Уроки

Артем, в данном случае код компонента не совсем корректен. Если бы у нас тут был TypeScript, то мы точно получили бы ошибку. Дело в том, что элементы из массива мы получаем по числовому индексу, то есть в нашем случае randomIndex должен быть именно числом, а у нас в стейте по-умолчанию да, задается пустая строка. Сделано это, вероятнее всего, чтобы точно не получить ни одного элемента. То есть possibleAnswers[""] в нашем случае ничего не вернет. Здесь, конечно же, логичней было бы по-умолчанию задать что-то типа -1.

В остальном все работает как обычно: при попытке получения из массива элемента по указанному индексу мы его или получаем (если он есть) или нет. В нашем случае до клика мы его не получаем, потом и ничего в ответ не выводится. А по клику задается существующий индекс, выполняется ререндеринг компонента, получаем элемент массива и выводим его. 

До того как мы нажали на кнопку, значение randomIndex равен пустой строке, а это значит 

const answer = possibleAnswers[""];   Почему в данном случае мы не получаем ошибку?  Как вычислятся значение {answer} в JSX до нажатия на кнопку?

Обсуждение задания "Use Advanced JavaScript in React Render Method"

Николай, спасибо за ответ. Вероятно я полагал что пытаясь получить элемент массива не по индексу, а по пустой строке мы должны получить ошибку. Сейчас проверил вот такой код - const digits = ['a', 'b' , 'c'];  console.log(digits['']); В итоге мы получаем undefind. Получается что если {answer} undefind, то реакт просто не выводит undefind в html.

FreeCode.Academy

Обсуждение задания "Use Advanced JavaScript in React Render Method"

Добавить комментарий