How to create Query String in React

Question

I currently doing a react app, I have to display the product image for each product, the product image is set as a ProductImagesID. To get the product image ID it needs to call an API.So I try to call directly in "src", but I don't know to replace the product. id and imageID with the data from the query to make it dynamic to show the photos for the specific product. Plz help me on how make the api in the src dynamic. With this i can learn somethings new to improve my knowledge. Thanks in Advance.

This how I try to call the API directly in the src

This the How the Productimage API with the productID and the ImageID.

This is the ProductImages are set in array of ID

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.0.1/react-dom.min.js"></script>
<div>
      <div className="wrapper">
        <div className="section latest-offers">
          <Container>
            <Row xs="1" sm="2" md="3">
              {res.data.Result.slice(0, 3).map((product) => {
                return (
                  <Col key={product.ID} xm="12" md={{ size: "3", offset: 1 }}>
                    <Card className="card-product card-plain d-flex flex-column p-3 flex-md-row  flex-sm-column">
                      <div className="card-image p-2 ">
                        <img
                          className=""
                          alt={product.Name}
                          src="/api/v1/ProductFile/?productID={610a454ad51ba524b7f949f9}/?get=Product/?imageID={610a4582d51ba524b7f949fa}"
                        />

                        <CardBody>
                          <div className="card-description font-weight-normal">
                            <CardTitle tag="h5">{product.Name}</CardTitle>
                          </div>
                          <div className="price">
                            <span className="mr-1">
                              <strong>
                                RM
                                {product.Price}
                              </strong>
                            </span>
                          </div>
                        </CardBody>
                      </div>
                    </Card>
                  </Col>
                );
              })}
            </Row>
          </Container>
        </div>
      </div>
    </div>

Perhaps you can add code snippets (not screenshots) so it'd be easier to construct an answer. My gut says you need to do string interpolation with back ticks (`) - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — mr rogers
– mr rogers, Commented Aug 9, 2021 at 1:06

Phil · Accepted Answer · 2021-08-12 08:01:40Z

2

Your Swagger screenshot indicates you need path parameters, not query parameters.

Try something like this

<img src={`/api/v1/ProductFile/${encodeURIComponent(product.ID)}/Product/${encodeURIComponent(product.ProductImages[0])}`}>

Note that I've run the parameters through encodeURIComponent() to make sure they won't break your URLs.

If you wanted to show all your images, you could use the map method

{product.ProductImages.map(image => (
  <img src={`/api/v1/ProductFile/${encodeURIComponent(product.ID)}/Product/${encodeURIComponent(image)}`} />
))}

edited Aug 12, 2021 at 8:01

answered Aug 9, 2021 at 1:22

Phil

166k25 gold badges265 silver badges269 bronze badges

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

5 Comments

Lucky Over a year ago

sorry if I asking a lot of questions, as in swagger you can see the ProductImages are in an array set in ID, how should I do to display only the 1st image of the array. Can you plz teach me?

Phil Over a year ago

@Lucky something like product.ProductImages[0] perhaps? I've updated my answer

Lucky Over a year ago

thank you so much, It's work. Thank you so much, I have learned new things today .

Lucky Over a year ago

@Phill wanted to ask if want to display all the images in the array. should I do like this product.ProductImages[ ] , plz help .

Phil Over a year ago

@Lucky I've added an example to my answer

Collectives™ on Stack Overflow

How to create Query String in React

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related