How to render a component by looping through the array in reactjs?

Question

i want to render a component if some condition is true and loop through that prop array.

Below is what i want to do

render() {
    return (
           {first_condition &&
               <div>some text</div>}
           {this.props.some_vars && 
               this.props.some_vars.forEach((var, index) => {
                   this.box_ref.current && var.name &&
                       <ChildComponent
                           element1={var.element1}
                           element2={var.element2}
                       />
           }//error here
       );
}

But the code gives me an error at the curly bracket...how should i render this childcomponent based on that condition. Thanks.

AKX · Accepted Answer · 2019-11-25 11:08:07Z

1

There were bracket-related syntax errors.
You'll have to use map, not forEach.
var is a reserved keyword; use variable.
To return multiple sibling components in render, wrap them in a fragment (<></>).
You should also figure out a key for each component rendered in the loop.

function render() {
  return (
    <>
      {first_condition && <div>some text</div>}
      {this.props.some_vars &&
        this.props.some_vars.map(
          (variable, index) =>
            this.box_ref.current &&
            variable.name && (
              <ChildComponent
                element1={variable.element1}
                element2={variable.element2}
              />
            )
        )}
    </>
  );
}

edited Nov 25, 2019 at 11:08

answered Nov 25, 2019 at 11:01

AKX

171k16 gold badges146 silver badges228 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

someuser2491 Over a year ago

what is this <> doing after return statement. new to react. so thanks

AKX Over a year ago

As I said, it's a React fragment: reactjs.org/docs/fragments.html

Dennis Vash · Accepted Answer · 2019-11-25 11:04:58Z

0

You should use #Array.map instead of #Array.forEach which returns void.

Moreover:

You must render a single React Node.
var is a preserved keyword.
You need to provide key property in React Node's array.

// </> is sugar syntax for <React.Fragment/>
<>
  {first_condition && <div>some text</div>}
  {this.props.some_vars &&
    this.props.some_vars.map(
      (value, index) =>
        this.box_ref.current &&
        value.name && (
          <ChildComponent key={index} element1={value.element1} element2={value.element2} />
        )
    )}
</>

Refer to List and Keys in React docs.

edited Nov 25, 2019 at 11:04

answered Nov 25, 2019 at 10:59

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Comments

hardy · Accepted Answer · 2019-11-25 11:08:11Z

0

You should user .map (which is an array method in JS). This returns a new array always. It also returns immutable things, which are new and different from reference, it means if you change the provided array it will make no effect to the result of mapped array. As ForEach loop is mutable, this carry forward the reference.

That's why we use immutable like .map

Here, how we can use ?

        {this.props.some_vars.map(item, index) => 
            <ChildComponent
              key= {index}  //if you not pass the key it will throw warning.
              element1={item.element1}
              element2={item.element2}
            />
        }

answered Nov 25, 2019 at 11:08

hardy

9013 gold badges14 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to render a component by looping through the array in reactjs?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related