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: https://stackoverflow.com/questions/2858121/how-can-i-convert-a-comma-separated-string-to-an-array — Valeriy, Sep 15 '20 at 10:02

Nithish · Answer 1 · 2020-09-15T10:31:39.843

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 '20 at 10:31

answered Sep 15 '20 at 09:56

Nithish

5,393
2
9
24

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 – Shubham Sharma Sep 15 '20 at 10:21
I have updated the answer to check if the received response is empty or not and then splitting. Please check. – Nithish Sep 15 '20 at 10:32

score 2 · Answer 2 · answered Sep 15 '20 at 09:57

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)

score 2 · Answer 3 · answered Sep 15 '20 at 09:59

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 '20 at 09:59

su_sundariya

73
1
9

score 1 · Accepted Answer · answered Sep 15 '20 at 10:08

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 '20 at 10:08

r7r

1,440
1
11
19

How to seperate item in array using react

4 Answers4