Reactjs - How can we repeat a pattern of elements using for loop and input info on array in jsx by also including CSS classes and tags?

Greg
June 20, 2023
206 views
0 votes
2 Answers

          <div>
            <label className='tag'><BsFillCheckCircleFill className="tag-icon"/> A </label>
            <label className='tag'><BsFillCheckCircleFill className="tag-icon"/> B </label> 
            <label className='tag'><BsFillCheckCircleFill className="tag-icon"/> C </label> 
            <label className='tag'><BsFillCheckCircleFill className="tag-icon"/> D </label> 
            <label className='tag'><BsFillCheckCircleFill className="tag-icon"/> E </label> 
            <label className='tag'><BsFillCheckCircleFill className="tag-icon"/> F </label> 
            <label className='tag'><BsFillCheckCircleFill className="tag-icon"/> G </label> 
            <label className='tag'><BsFillCheckCircleFill className="tag-icon"/> H </label> 
            <label className='tag'><BsFillCheckCircleFill className="tag-icon"/> I </label> 
          </div>

I am having trouble inputting class names, tags and texts at the same time.

Tags: jsx reactjs

Answers

- mikenlanggio
- June 20, 2023 at 10:41 am
- 0 votes
0
You can loop like this one:
```
<div>
    {
        ['A','B','C','D','E','F'].map(x=> {
            return <label className='tag'><BsFillCheckCircleFill className="tag-icon" />{x}</label>
        })
    }
</div>
```
Login or Signup to reply.

- suppaGonzalo
- June 20, 2023 at 10:59 am
- 0 votes
0
You can either use map, for loop or forEach loop.
```
data= ['HTML', 'CSS', 'Javascript', 'React', 'Java', 'Android', 'Python', 'PHP', 'MySQL'] 
```
Using Map,
```
<div>
  {data.map((val) => (
    <label className="tag"><BsFillCheckCircleFill className="tag-icon">{val}</label >
  ))}
</div>
```
Using for loop and forEach is also quite similar just wrap your code within { }. Still you can see the documentation from https://developer.mozilla.org/en-US/docs/Web/JavaScript
Login or Signup to reply.