ReactJS Array Parse inside Object-CodePudding

I have a object

{
    "id": 1,
    "collectionName": "dsa",
    "collectionItemsID": [
        "ad",
        "deneme1"
    ],
    "ownerOfCollection": "117961395738439786389",
    "createdAt": "2022-06-16T12:54:52.146Z",
    "updatedAt": "2022-06-16T12:54:52.146Z"
}

When I push to front like that in ReactJS

{collection.collectionItemsID}

I am getting output with joined.

addeneme1

It needs to be seperated. I didnt wanted to use javascript for seperate. I need to learn how to do correctly. I think I needs to use Object.keys but I am failed with this way.

How can I map collectionItemsID in ReactJS?

this is the example way of I wanted to implement object outputs

          {data.map((item, i) => (
            <tr key={i}>
              <td>
                <input
                  id={item.user_id}
                  type="checkbox"
                  value={item.user_id}
                  onChange={handleChange}
                  checked={isChecked}
                />
              </td>
              <td>{item.user_id}</td>
              <td>{item.user_name}</td>
              <td className="isbanned">{item.isbanned}</td>
              <td>{item.registration_date}</td>
              <td>{item.last_login}</td>
            </tr>
          ))}

Solution

<div>

            {Object.keys(collection).length > 0 ? <div>
                <h1>{collection.name}</h1>
                <p>{collection.description}</p>
                {collection.collectionItemsID.map(function (itemID) {
                    return <a href={`/${itemID}`}>{itemID}</a>
                })}
            </div> : <p>Loading...</p>}
        </div>

CodePudding user response：

Solution

If you want have each entry in collectionItemsID to have it's own link, you need to use the map method of an array

collection.collectionItemsID.map(function(itemID) {
                    return <a href={`/${itemID}`}>{itemID}</a>
                })

Explanation

From the documentation of map method

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

Suggestions

You should always name your list attributes in plural form so instead of collectionItemsID it should be collectionItemIDs which indicates to anyone reading that it potentially have multiple values.
You should also not add the word collection to the attribute as the object itself is a collection. for example it should be

{
    "id": 1,
    "name": "dsa",
    "itemIds": [
        "ad",
        "deneme1"
    ],
    "owner": "117961395738439786389",
    "createdAt": "2022-06-16T12:54:52.146Z",
    "updatedAt": "2022-06-16T12:54:52.146Z"
}

This way when you have a variable holding the object, the code becomes

var collection = {....}
collection.name // dsa
collection.owner // 117961395738439786389
collection.itemIds // ["ad","deneme1"]

CodePudding user response：

I think what you might be looking for is...

<a href={`/${collectionItemsID.join(' ')}`}>

CodePudding user response：

This is the answer of my question

        <div>

            {Object.keys(collection).length > 0 ? <div>
                <h1>{collection.name}</h1>
                <p>{collection.description}</p>
                {collection.collectionItemsID.map(function (itemID) {
                    return <a href={`/${itemID}`}>{itemID}</a>
                })}
            </div> : <p>Loading...</p>}
        </div>