How to make html code as a variable and use it?

Question

Below is my sample code .....

<ul>
  {this.state.showAllUser == false 
        ? someArray.slice(0, 3).map(function(user, index) {
              return (
                    <li key={index}> {user.name}<li>
              )
        : someArray.map(function(user, index) {
              return (
                    <li key={index}> {user.name}<li>
              )
  }
</ul>

If this.state.showAllUser is false, i will only show three of array or show all of them if true.

My question is how to make this code more clean , can I make a function or variable and use it in refer function？

Mario Santini · Accepted Answer · 2016-08-18 12:22:49Z

1

You could use the Array method instead, like so:

<ul>
      {someArray.filter(function(el, index) {
        if (!this.state.showAllUser) {
          // Print the first 3 elements
          return (index < 3)
        } else {
          // Print all
          return true
        }
      })
      .map(function(user, index) {
        return (<li key={index}> {user.name}</li>)
      })
    }
</ul>

In this way it is very clear where you control which elements are going to be shown and which are not.

And more you write only once the virtual DOM part.

answered Aug 18, 2016 at 12:22

Mario Santini

3,0112 gold badges22 silver badges30 bronze badges

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

1 Comment

Dreams Over a year ago

Thanks a lot.It really helps me.

Learning · Accepted Answer · 2016-08-18 10:26:48Z

1

<ul>
  {
    (this.state.showAllUser == false ? someArray.slice(0, 3) : someArray).map((user, index) => <li key={index}> {user.name}<li>);
  }
</ul>

answered Aug 18, 2016 at 10:26

Learning

3051 silver badge13 bronze badges

Collectives™ on Stack Overflow

How to make html code as a variable and use it?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related