CODEWITHSUNDEEP
javascriptreactjs
someuser2491
someuser2491

Reputation: 1968

How to render jsx in react with condition true and array mapping?

I want to render a JSX with some condition being true and map through an array.

below is the code,

{this.props.variables &&
     this.props.variable.map((variable, index) => {
         let element;
         if (variable.anchor) {
             element = document.querySelector(variable.anchor);
         }
         this.box_ref.current && element && (// error here
             <Childcomponent
                 element1={this.box_ref.current}
                 anchor={variable.anchor}
              />)
          }
      }
  )
}

There is an error saying that the expression is not an assignment or a call. how can I fix it? thanks.

Upvotes: 1

Views: 58

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53894

You need to provide a return value for #Array.map callback.

Also, you should provide unique keys to React elements within an array:

<>
  {this.props.variables &&
    this.props.variable.map((variable, index) => {
      let element;
      if (variable.anchor) {
        element = document.querySelector(variable.anchor);
      }
//       v Add return statement
      return (
        this.box_ref.current &&
        element && (
          <Childcomponent
            key={index}
            element1={this.box_ref.current}
            anchor={variable.anchor}
          />
        )
      );
    })}
</>

Upvotes: 3

Related Questions