Как вывести этот блок?

Question

[Pogran]

У меня есть такой код

renderTreeString(key, value) {
		return (
			<div style={{margin: '3px 0'}} key={key} >
			   test
			</div>
		);
	}

	renderBlocks() {
		const { entity } = this.props;
		return (
			Object.keys(entity.structure).map(key =>
				<Input key={key} inputKey={key} inputValue={entity.structure[key]} />
			)
		);
	}

он работает отлично. но вот проблемы становяться когда я хочу сделать какую-нибудь логику внутри map, т.е вот так

renderBlocks() {
		const { entity } = this.props;
		return (
			Object.keys(entity.structure).map(key => {
                                  console.log('test');
				<Input key={key} inputKey={key} inputValue={entity.structure[key]} />
			})
		);
	}

У меня не рендит тогда. По сути я понимаю что я в return хочу логику забить и поэтому получаю такой результат. А как правильно сделать в данном случае?

UPDATE:
Сделал вот так

renderTree() {
		const { entity } = this.props;
		return (
			Object.keys(entity.structure).map(key => {
				if(typeof entity.structure[key] === 'object') {
					Object.keys(entity.structure[key]).map(key2 => {
						console.log(entity.structure[key][key2]);
						return (
							this.renderTreeString(key2, entity.structure[key][key2])
						)
					})
				} else {
					return (
						this.renderTreeString(key, entity.structure[key])
					)
				}
			})
		);
	}

Смысл в том что console.log(entity.structure[key][key2]); выводится а вот this.renderTreeString(key2, entity.structure[key][key2]) не отрабатывает нормально

Вообще смысл задачи чтобы вывести объект любой вложенности. Может кто подскажет какое другое решение через рекурсию какую. Сейчас я пытаюсь вывести объект только 2 уровня, т.е вот такой prntscr.com/cd8duc . Данные храню в object , т.к там соотношение ключ - значение(это объект сущностей)

Answer 1

[theWaR_13]

Делайте логику внутри map, а перед компонентом ставьте return, т.е.:

Object.keys(entity.structure).map(key => {
                                  console.log('test');
        return <Input key={key} inputKey={key} inputValue={entity.structure[key]} />
      })

UPD.

renderTree() {
    const { entity } = this.props;
      Object.keys(entity.structure).map(key => {
        if(typeof entity.structure[key] === 'object') {
          Object.keys(entity.structure[key]).map(key2 => {
            console.log(entity.structure[key][key2]);
            this.renderTreeString(key2, entity.structure[key][key2])
          })
        } else {
          this.renderTreeString(key, entity.structure[key])
        }
      }
    );
  }

Comments

[Pogran]

да вы все верно написали, я обновил вопрос. не всё гладко выводит

[theWaR_13]

Pogran: а в чем именно ошибка? Проверьте, вызывается ли метод renderTreeString

[theWaR_13]

Pogran: а вообще, вы уверены, что есть смысл в этом методе? Почему бы не выводить непосредственно DOM-блок прямо в map?

[Pogran]

theWaR_13: renderTreeString вызывается, проверил. Просто не хочет выводить его

[Pogran]

theWaR_13: про метод не понял что вы имеете ввиду. Т.е вы говорите отказаться от метода renderTreeString ?

[theWaR_13]

Pogran: ааа, все, я нашел ошибку :) Вам нужно не возвращать этот метод, а про сто вызывать его :) А он уже вернет DOM-блок.

[Pogran]

theWaR_13: сделал вот так
renderTree() {
const { entity } = this.props;
return (
Object.keys(entity.structure).map(key => {
if(typeof entity.structure[key] === 'object') {
Object.keys(entity.structure[key]).map(key2 =>
this.renderTreeString(key2, entity.structure[key][key2])
)
} else {
return (
this.renderTreeString(key, entity.structure[key])
)
}
})
);
}

Результат тот же вот этот не возвращает ничего this.renderTreeString(key2, entity.structure[key][key2])

[theWaR_13]

Pogran: я сейчас еще раз обновил код. Попробуйте в самом начале метода renderTree убрать return.

[Pogran]

theWaR_13: Сделал как вы сказали ,сейчас вообще ничего не выводит

[theWaR_13]

Pogran: у вас есть код на гитхабе или где-нибудь еще? Просто по данным кускам кода я не вижу, в чем может быть проблема.

[Pogran]

theWaR_13: кода нет( могу на почту скинуть проект

[theWaR_13]

Pogran: скидывайте на [e-mail]

[Pogran]

theWaR_13: открыл доступ https://drive.google.com/file/d/0B_wYKib-PybWMWhQb...

[Pogran]

theWaR_13: К критике кода отношусь хорошо:)

[Pogran]

theWaR_13: получилось проект развернуть?

[theWaR_13]

Pogran: нет, отходил на обед. Напишите команды для запуска, пожалуйста.

[Pogran]

theWaR_13: npm i
npm run server

[theWaR_13]

Pogran: Это я понял. При запуске выдает такую ошибку:
Error: connect ECONNREFUSED 127.0.0.1:27017

Я так понимаю, что нужно и бэкенд еще запускать?

[Pogran]

theWaR_13: это монго бд. Установите себе mongo на комп

[theWaR_13]

Pogran: я так понимаю, что у вас превью не работает? Потому что у меня все отображается как надо и функция отрабатывает корректно.
imgur.com/a/7FkYC

[Pogran]

theWaR_13: да у меня не работает когда вложенность делаю. нажмите справа add и добавьте что-нить. С отладчике вы увидете что state entity изменилось, а вот render не произошёл

[theWaR_13]

Pogran: увы, сходу не вижу где проблема. Сейчас на работе, может вечерком гляну еще. Если сами найдете ошибку, отпишитесь, интересно посмотреть.

[Pogran]

theWaR_13: ага ок

Answer 2

[Евгений]

Оберните input в return и выводите перед этим что хотите в консоль:

renderBlocks() {
    const { entity } = this.props;
    return Object.keys(entity.structure).map(key => {
        console.log('test');
        return (
            <Input key={key} inputKey={key} inputValue={entity.structure[key]} />
        );
    })
}

Comments

[Pogran]

да вы все верно написали, я обновил вопрос. не всё гладко выводит