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

ZeeshanAwan
April 6, 2020
222 views
0 votes
2 Answers

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

Answers

- cyck
- April 6, 2020 at 7:29 pm
- 0 votes
0
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 </>
))
```
Login or Signup to reply.

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;});

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>

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

and

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

{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>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers