react js issue with rendering data in array.map()

Question

laravel and react js

I am trying to getting data from laravel route and mapping it in my component when i try small code block under array.map function it works link shown in this image also saying that vision is unresolve variable, but it work and render the data

Now problem is here that when i try some big data under array.map it is making error and not rendering layout problem code is here

  <div className="services-pack">

                            {
                                sr.map(data =>(
                            <div className="Sr-item z-depth-1 wow fadeInRight slow">


                                <div className="icon-wrap">
                                    <div className="S-icon rounded-circle">
                                        <img  src="../../../img/fron-end.png" alt="icons fron-end"
                                             className="img-fluid"/>
                                    </div>
                                </div>
                                <div className="S-name">
                                    <h3>{data.frontEnd}</h3>
                                    <p>{data.frontEnd-intro}</p>
                                </div>

                            </div>



                            <div className="Sr-item z-depth-1 wow fadeInUp delay-1s slow">
                                <div className="icon-wrap">
                                    <div className="S-icon rounded-circle">
                                        <img src="../../../img/fron-end.png" alt="icons fron-end"
                                             className="img-fluid"/>
                                    </div>
                                </div>
                                <div className="S-name">
                                    <h3>{data.backtEnd}</h3>
                                    <p>{data.backtEnd-intro}</p>
                                </div>
                            </div>


                            <div className="Sr-item z-depth-1 wow fadeInUp delay-1s slow">
                                <div className="icon-wrap">
                                    <div className="S-icon rounded-circle">
                                        <img src="../../../img/fron-end.png" alt="icons fron-end"
                                             className="img-fluid"/>
                                    </div>
                                </div>
                                <div className="S-name">
                                    <h3>Wordpress Website</h3>
                                    <p>Elementor & Visual Composer Dev. </p>
                                </div>
                            </div>
                            <div className="Sr-item z-depth-1 wow fadeInUp delay-1s slower">
                                <div className="icon-wrap">
                                    <div className="S-icon rounded-circle">
                                        <img src="../../../img/fron-end.png" alt="icons fron-end"
                                             className="img-fluid"/>
                                    </div>
                                </div>
                                <div className="S-name">
                                    <h3>Analytics</h3>
                                    <p>Get Insights Into Who Is Browsing Site</p>
                                </div>
                            </div>
                                ) ) }



                                </div>

i want to render all my data in all of these Sr-items blocks, but when i shift closing brackets of map function at the end where i want to close them i makes error here how error code looks

cyck · Accepted Answer · 2020-04-06 17:29:49Z

1

The problem is that a JSX function can only return a single Element.

You need to wrap the returning elements of the function passed to the map with a React Fragment (https://reactjs.org/docs/fragments.html)

sr.map((data) => (
  <React.Fragment> // or just <>
    <div></div>
    <div></div>
    // ...
  </React.Fragment> // or just </>
))

answered Apr 6, 2020 at 17:29

cyck

1266 bronze badges

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

Comments

talha_ah · Accepted Answer · 2020-04-06 17:30:39Z

The problem with your code is that you are returning multiple div inside a single return statement when it should be only one. Wrap all the div inside one parent div and it will work in the map return statement.

array.map(element => { return something;});

Or

array.map(element => something);

these two lines results are equal. Also you cannot use hyphen(-) for variable names as you have used

<p>{data.frontEnd-intro}</p>

and

<p>{data.backtEnd-intro}</p>

Instead these should be:

<p>{data.frontEndIntro}</p>

Or

<p>{data.frontEnd_intro}</p>

and

<p>{data.backtEndIntro}</p>

Or

{data.backtEnd_intro}

Checkout this:

<div className='services-pack'>
        {this.state.sr.map((data) => (
          <div>
            <div className='Sr-item z-depth-1 wow fadeInRight slow'>
              <div className='icon-wrap'>
                <div className='S-icon rounded-circle'>
                  <img
                    src='../../../img/fron-end.png'
                    alt='icons fron-end'
                    className='img-fluid'
                  />
                </div>
              </div>
              <div className='S-name'>
                <h3>{data.frontEnd}</h3>
                <p>{data.frontEndIntro}</p>
              </div>
            </div>

            <div className='Sr-item z-depth-1 wow fadeInUp delay-1s slow'>
              <div className='icon-wrap'>
                <div className='S-icon rounded-circle'>
                  <img
                    src='../../../img/fron-end.png'
                    alt='icons fron-end'
                    className='img-fluid'
                  />
                </div>
              </div>
              <div className='S-name'>
                <h3>{data.backtEnd}</h3>
                <p>{data.backtEndIntro}</p>
              </div>
            </div>

            <div className='Sr-item z-depth-1 wow fadeInUp delay-1s slow'>
              <div className='icon-wrap'>
                <div className='S-icon rounded-circle'>
                  <img
                    src='../../../img/fron-end.png'
                    alt='icons fron-end'
                    className='img-fluid'
                  />
                </div>
              </div>
              <div className='S-name'>
                <h3>Wordpress Website</h3>
                <p>Elementor & Visual Composer Dev. </p>
              </div>
            </div>
            <div className='Sr-item z-depth-1 wow fadeInUp delay-1s slower'>
              <div className='icon-wrap'>
                <div className='S-icon rounded-circle'>
                  <img
                    src='../../../img/fron-end.png'
                    alt='icons fron-end'
                    className='img-fluid'
                  />
                </div>
              </div>
              <div className='S-name'>
                <h3>Analytics</h3>
                <p>Get Insights Into Who Is Browsing Site</p>
              </div>
            </div>
          </div>
        ))}
      </div>

Collectives™ on Stack Overflow

react js issue with rendering data in array.map()

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related