Почему глючит if/else?

Question

[Mixa]

Изучаю React по самоучителю. С помощью него выстроился такой код:

const myNews = [
  {
    id: 1,
    author: 'Новость 1',
    text: 'В четверг, четвертого числа...'
  },
  {
    id: 2,
    author: 'Новость 2',
    text: 'Считаю, что $ должен стоить 35 рублей!'
  },
  {
    id: 3,
    author: 'Новость 3',
    text: 'Прошло 2 года с прошлых учебников, а $ так и не стоит 35'
  },
  {
    id: 4,
    author: 'Новость 4',
    text: 'Бесплатно. Без смс, про реакт, заходи'
  },
];


class News extends React.Component {
  render() {
    const { novyna } = this.props
    let newsTemplate

    if (novyna.length) {
      newsTemplate = novyna.map(function(item) {
        return (
          <div key={item.id}>
            <p className="news__author">{item.author}:</p>
            <p className="news__text">{item.text}</p>
            <hr/>
          </div>
        )
      })
    } else {
      newsTemplate = <p>Нет</p>
    }

    return (
      <div className="news">
        {newsTemplate}
        <strong>Всего новостей: {novyna.length}</strong>
      </div>
    )
  }
}


const Comments = () => {
  return <p>Нет новостей, нечего комментировать</p>
}


const App = () => {
  return (
    <React.Fragment>
      <News news={myNews} />
      <Comments />
    </React.Fragment>
  )
}



ReactDOM.render(<App />, document.getElementById('root'));

Так вот в данному случае if(novyna.lenght) в условиях запускает вариант, когда новостей нет, хотя подсчет количества работает правильно.

Также в процессе экспериментов было установлено, что если написать в условии вообще какую-либо фигню, типа if(novyna.lenght=55), то новости выводятся как ни в чем не бывало.

Почему так и где моя ошибка?

Comments

[Алексей Ярков]

А что с отступами случилось?

Answer 1

[Антон Спирин]

Так вот в данному случае if(novyna.lenght) в условиях запускает вариант, когда новостей нет, хотя подстчет количества работает правильно.

www.google.ru/search?q=length

Answer 2

[0xD34F]

if (novyna.lenght) {

Что ещё за "lenght"? Я такого слова не знаю. Есть "length".

в процессе экспериментов было установлено, что если написать в условии вообще какую-либо фигню, типа if(novyna.lenght=55), то новости выводятся как ни в чем не бывало

Предлагаю разобраться, чем присваивание отличается от проверки на равенство.

class News extends React.Component {

У этого компонента нет причин быть классом:

const News = ({ news }) =>
  <div className="news">
    {Array.isArray(news) && news.length
      ? news.map(n => (
          <div key={n.id}>
            <p className="news__author">{n.author}:</p>
            <p className="news__text">{n.text}</p>
            <hr/>
          </div>
        ))
      : <p>Нет</p>}
    <strong>Всего новостей: {news.length}</strong>
  </div>;

Answer 3

[harutyunyan]

Условие всегда заносите в return, т.к. вы просто убивайте компонент если не дай бог условие вернет null или undefined

Comments

[harutyunyan]

Подправил,чтобы не запутать других. Спасибо