How to seperate item in array using react

Question

user.js

import React, { useState, useEffect } from 'react';
import Axios from 'axios';

const RecommendationDetail = () => {
  const [image, setImage] = useState([]);

  useEffect(() => {
    loadRekko();
}, []);


  const loadRekko = async () => {
    const res = await Axios.get(`http://localhost:3001/dashboard-rekko/${id}`,{
        headers:headers
    }); 


    console.log(res.data.response);
    var array = [];
    let a = (res.data.response.rekkoRecords.product_img)
    array.push(a)
    setImage(array)    ====>>> How can i make array like i want
    console.log(image)
    setRecommendation(res.data.response.rekkoRecords)
  }

 return (
    {image.map((it) => {
            return (
                <div key={it}>
                    <img src= {'http://localhost:3001/'+it} />
                </div>
            )
            
        })}
 )
}

Everything is working but I want to show multiple images. I am getting a response in "uploads\classpamplate.png,uploads\classpamplate1.jpg" this format and after pushing it in the array it becomes ["uploads\classpamplate.png,uploads\classpamplate1.jpg"] but what I want is ["uploads\classpamplate.png","uploads\classpamplate1.jpg"] both are separated so that I can show it using .map() function. Any help will be appreciated

You can get answer here: stackoverflow.com/questions/2858121/… — Valeriy
– Valeriy, Commented Sep 15, 2020 at 10:02

norbitrial · Accepted Answer · 2020-09-15 09:57:38Z

2

You can use .split() to separate that string by comma ,:

The split() method divides a String into an ordered list of substrings, puts these substrings into an array, and returns the array.

let a = (res.data.response.rekkoRecords.product_img)
setImage(a.split(','))

See a live example below:

const data = `uploads\classpamplate.png,uploads\classpamplate1.jpg`
const result = data.split(',')
console.log(result)

answered Sep 15, 2020 at 9:57

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

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

Comments

su_sundariya · Accepted Answer · 2020-09-15 09:59:08Z

2

Just split the string by ,. it will return a new array

let result = (res.data.response.rekkoRecords.product_img).split(',');
let array = [...result];

answered Sep 15, 2020 at 9:59

su_sundariya

831 silver badge9 bronze badges

Comments

Nithish · Accepted Answer · 2020-09-15 10:31:39Z

2

You can split them using , so that it'll be converted to an array

let a = (res.data.response.rekkoRecords.product_img).split(",");
array.push(...a)

or

Directly you can call setImage like below

setImage(res.data.response.rekkoRecords.product_img.split(","));

Check if the response is empty or not and then split

let a = (res.data.response.rekkoRecords.product_img);
a = a && a.split(",") || []
setImage([...a])

edited Sep 15, 2020 at 10:31

answered Sep 15, 2020 at 9:56

Nithish

6,1273 gold badges13 silver badges25 bronze badges

2 Comments

Shubham Sharma Over a year ago

How can I put check if there will be no image it will not show anything as if I have one image then it has a length as 1 and if there is no image then also it has a length 1

Nithish Over a year ago

I have updated the answer to check if the received response is empty or not and then splitting. Please check.

r7r · Accepted Answer · 2020-09-15 10:08:48Z

1

I am assuming a = "uploads\classpamplate.png,uploads\classpamplate1.jpg"

expected result = ["uploads\classpamplate.png","uploads\classpamplate1.jpg"]

Don't push a in the array, try below

setImage(a.split(','))

answered Sep 15, 2020 at 10:08

r7r

1,5472 gold badges13 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to seperate item in array using react

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related