Я не могу добавить элементы из функции?

Question

Проблема: Я работаю над проектом. Значения приходят из другого компонента. Согласно этим значениям, я хочу добавить элементы в «рендер». Но я не мог этого сделать. Вот функция:

isVisible = () => {
this.props.contents.contents.map( value => {
    console.log(value)
    console.log(Object.values(value)[0])
    if(Object.keys(value)[0] === "mushroom" ){
      if(Object.values(value)[0] === true){
        alert("true")
        return(<div style={{
                  position: "absolute",
                  top: "0",
                  left: "0",
                  width: "100px",
                  height: "100px",
                  background: 'red',
                  opacity: "1",
                  zIndex: "100"
        }}>...</div>)
      }
    }

}) 
}

---

С Опорами нет проблем. Оказывается, правда. Так что «оповещение» работает. Но я не смог напечатать ответ здесь:

render(){
  return(
    <Wrap>
      <div className={classes.imageBox}>
        <div  className={classes.image}>
          {this.isVisible()}
        </div>
      </div>
    </Wrap>
  )
} 

Как мне решить эту проблему?

Answer 1

Он ничего не возвращает

isVisible = () => {
  this.props.contents.contents.map(...) . <-- this is not returned
}

, поэтому он возвращает неопределенное значение при вызове isVisible.Вам нужно добавить оператор возврата или убрать скобки.

так

isVisible = () => {
  return this.props.contents.contents.map(...)
}

или

isVisible = () => 
  this.props.contents.contents.map(...)