Почему не могу отрендерить элементы из объекта?

Question

[Nikita Shchypylov]

Хочу вывести свойство - значение в реакте так :

render() {
    const notif = this.props.notifications;
    const content = notif ? (
        _.forOwn(notif, function(key, value) {
          return (
              <div>{key} - {value}</div>
          )
        })
    ) : (
        <div>loading</div>
    );
    return (
        <div className="top-menu" onClick={this.props.changeSidebar}>
          <a href="#">change menu</a>
          <div className="top-menu__notifications">
            {content}
          </div>
        </div>
    );
  }

notif выглядит так :

На что я получаю :
Objects are not valid as a React child (found: object with keys {Notifications, Messages}). If you meant to render a collection of children, use an array instead.

А если я не хочу использовать Array? Я же не вывожу тут объект, а только строки

Answer 1

[0xD34F]

А вы вообще понимаете, что делает метод forOwn? Явно нет. Он перебирает собственные свойства объекта, передавая их в коллбек. Всё. Что вы там из коллбека вернёте - неважно, forOwn вернёт переданный объект. Документацию могли бы и почитать.

Вам lodash тут не нужен:

Object.keys(notif).map(key => <div key={key}>{key} - {notif[key]}</div>)

А если всё же без него никак, то используйте map вместо forOwn:

_.map(notif, (value, key) => <div key={key}>{key} - {value}</div>)