我不能从函数中添加元素？

Question

Problem: I am working on a project. Values ​​come from another component. According to these values, I want to add elements in the "render". But I couldn't do it. Here is the function:

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>)
      }
    }

}) 
}

---

There's no problem with the Props. It turns true. So the "alert" works. But I couldn't print the in return here:

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

How do I solve this problem?

Answer 1

It is not returning anything

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

so it returns undefined when you call isVisible. You need to add return statement or drop the brackets.

so

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

or

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