ReactJS : Only render element if array has values

Question

I only want to render array values as elements, if the array has values and exists. In my case there is an array of colors, the user can set the current color_theme, which is represented by its index. On start there should no color_theme be chosen. My render function will try to render the current color_color_theme, but there is noch current_color_index. How can I check if there is an exsiting colorsheme before the rendering? I cannot write a return before the redering, because there are other elements, that have to be rendered.

 data = {
   "colorthemes" : [ ["blue","red"], ["black","grey"] ],
   "current_color_index": "", 

   ....//more 
 }


    render: function() {

    return (
        <div>
            <ul>
                //other stuff is rendering
            </ul>
            <ul>
                    {this.state.data.colorthemes[this.state.data.current_color_index].map(function(item, i) {
                      ....
                    }, this)}  
            </ul>
       </div>

nyumerics · Accepted Answer · 2016-03-11 11:25:54Z

2

Just use an if condition, inside the jsx, something like

{
    condition ?
    <MyRenderElement /> :
    null
}

If the condition is not met, nothing will be rendered by this block of code.

SUGGESTION: I would suggest you to have reasonable default values rather than using such an if condition. Helps you to keep lesser control flow paths and lesser bugs.

answered Mar 11, 2016 at 11:25

nyumerics

6,5873 gold badges31 silver badges52 bronze badges

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

2 Comments

vuvu Over a year ago

the loop breaks, where in the loop can I place a condition? -> .map(function(item, i)...

nyumerics Over a year ago

You are using the functional programming constructs wrongly. First map everything and then use filter to remove all unwanted things.

Theo · Accepted Answer · 2016-03-11 11:36:09Z

1

I think you could do it in a simpler manner like:

{ condition && <MyRenderElement/> }

I would say that this makes a bit more sense for your case.

answered Mar 11, 2016 at 11:36

Theo

1,20310 silver badges14 bronze badges

Collectives™ on Stack Overflow

ReactJS : Only render element if array has values

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related