CODEWITHSUNDEEP
javascripthtmlreactjs
js_248
js_248

Reputation: 2112

Passing div data from map in other component

I am creating Test component using Carousel component.
In Carousel component I am passing div with data from props.But I want to pass img src from testData props as follows.

export default class Test extends Component {
    render() {

        const { testData } = this.props;
        return (
                <div>
                        <Carousel>
                        {
                            testData.length && testData.map((a) => (
                                    <div><img src=
                                        {a.link} />
                                    </div>

                                )
                            )
                        }



                        </Carousel>

            </div>

        );
    }
}

testData = [{"link":"/test1.jpg"},
{"link":"/test2.jpg"},
{"link":"/test3.jpg"}
]

When I do this as follows then it is working fine.

 <div> <img src="/test1.jpg" /></div>
 <div> <img src="/test2.jpg" /></div>
 <div> <img src="/test3.jpg" /></div>

What I am doing wrong using testData.

Upvotes: 0

Views: 49

Answers (3)

js_248
js_248

Reputation: 2112

I finally got the issue. In first case when I am using static data as

testData = [{"link":"/test1.jpg"},
{"link":"/test2.jpg"},
{"link":"/test3.jpg"}
]

It will get showed to page every time component rendered. But in second case

const { testData } = this.props;

testData is set by API call.So it will not get fetched when component rendered first.To resolve this issue I did this

if (!caurosalData.length) {
            return null;
        }

Now it is working fine

Upvotes: 0

Neha Agarwal
Neha Agarwal

Reputation: 11

import React, { Component } from 'react'
import {Carousel} from 'react-bootstrap'

export default class Test extends Component {
render() {
    const testData = [{"link":"/test1.jpg"},
                      {"link":"/test2.jpg"},
                      {"link":"/test3.jpg"}]
    return (
        <Carousel>
         {testData.length && testData.map((a) => 
            (<div>
               <img src={a.link} />
             </div>))}

         </Carousel>
    );
  }

}

This piece of code is working fine, So I think the problem lies in how you are passing testData through props.

If you could provide the code where you are passing the testData as props a solution can be found out.

Upvotes: 0

Davin Tryon
Davin Tryon

Reputation: 67296

Regular JavaScript comments are not allowed in JSX:

//<div> <img src="/test1.jpg" /></div>
//<div> <img src="/test2.jpg" /></div>
//<div> <img src="/test3.jpg" /></div>

To comment in JSX you must wrap in { }.

{ /*<div> <img src="/test1.jpg" /></div>
<div> <img src="/test2.jpg" /></div>
<div> <img src="/test3.jpg" /></div>*/ }

Upvotes: 1

Related Questions