CODEWITHSUNDEEP
javascriptarraysjsonreactjsobject
somhin
somhin

Reputation: 35

I have a problem with returning each value of an array

I'm a beginner to React and JavaScript. I've been learning them by following the tutorial on YouTube and free code camp on my own. So my question might be confusing, but I'll try my best to describe my question.

I've been attempting to write some React eCommerce websites by following the YouTube tutorials and adding my own code. But I have some problem with returning each value of an array inside an object. This is what my data looks like.

products: [
        {
        _id: '001',
        image: '/images/v1.jpg',
        category: 'Korea',
        name: 'Vivid',
        artist: 'ADOY',
        price: 60,
        rating: 4.5,
        numReview: 10,
        tracklist: [
            "Lemon", "Porter", "Pool", "Someday", "Domino", "Swim", "Ever", "Ugly", "Moondance", "Away"
        ]
    },
    {
        _id: '002',
        image: '/images/v2.jpg',
        category: 'Korea',
        name: 'Catnip',
        artist: 'ADOY',
        price: 40,
        rating: 4.0,
        numReview: 7
    },...

I already have a map function that does return each value of an object from another component (copied from YouTube tutorial)

import React from 'react';
import data from '../data';
import { Link } from 'react-router-dom';

function HomeScreen (props) {
    return <ul className="products">
                {data.products.map(product => 
                <li>
                    <div className="product">
                        <Link to={'/product/' + product._id}>
                            <img src={product.image} alt="vinyl" className="product-image" />
                        </Link>
                        <div className="product-album">
                            <Link to={'/product/' + product._id}>{product.name}</Link>
                        </div>
                        <div className="product-artist">{product.artist}</div>
                        <div className="product-price">{product.price}</div>
                        <div className="product-rating">{product.rating} Stars ({product.numReview} reviews)</div>
                    </div>
                </li>
                )}
          </ul>
}

export default HomeScreen;

Now inside another component of my own. I've been attempting to make my tracklist from an array to display an ordered list in this component

import React from 'react'
import data from '../data';
import { Link } from 'react-router-dom';

function ProductScreen (props) {

    const product = data.products.find(x => x._id === props.match.params.id);

    return <div>
                <div className="details">
                    <div className="details-image">
                        <img src={product.image} alt="vinyl" />
                    </div>
                    <div className="details-info">
                        <ul>
                            <li>
                                <h1>{product.name}</h1>
                            </li>
                            <li>
                                {product.artist}
                            </li>
                            <li>
                                {product.rating} stars ({product.numReview} reviews)
                            </li>
                            <li>
                                <b>Price: ${product.price}</b>
                            </li>
                            <li>
                                Tracklist: <ol>
                                    {product.tracklist}
                                </ol>
                            </li>
                        </ul>
                    </div>
            </div>
}

export default ProductScreen;

But the result is I only get 1 list with all of the value like this [1]: https://i.sstatic.net/KCBMl.png

From my beginner knowledge and understanding, what I've tried so far is to write a function in this component like this

    const trackListing = () => {
        data.products.tracklist.map(track =>
            <li>{track}</li>
        )}

But it doesn't return any result on the website. Can anyone tell me how to fix this? or what should I learn in order to fix this issue? Sorry for my bad English. Thank you!

Upvotes: 2

Views: 85

Answers (3)

Gineet Mehta
Gineet Mehta

Reputation: 56

You rightly find the corresponding product with the following:
data.products.find(x => x._id === props.match.params.id);

Now that you have the product, you want to be generating a list of those objects. You need to generate a list of elements from tracklist items.

Try this:

<li> Tracklist:
    <ol>
        {product.tracklist.map(item => <li key={item}>{item}</li>}
    </ol>
</li>

Upvotes: 1

Jagdish Idhate
Jagdish Idhate

Reputation: 7742

Problem is with tracklist, you can use .map to create li list as below

import React from 'react'
import data from '../data';
import { Link } from 'react-router-dom';

function ProductScreen (props) {

    const product = data.products.find(x => x._id === props.match.params.id);
    const trackList =  product.tracklist.map(track =>
        <li>{track}</li>
    );

    return <div>
                <div className="details">
                    <div className="details-image">
                        <img src={product.image} alt="vinyl" />
                    </div>
                    <div className="details-info">
                        <ul>
                            <li>
                                <h1>{product.name}</h1>
                            </li>
                            <li>
                                {product.artist}
                            </li>
                            <li>
                                {product.rating} stars ({product.numReview} reviews)
                            </li>
                            <li>
                                <b>Price: ${product.price}</b>
                            </li>
                            <li>
                                Tracklist: <ol>
                                    {trackList}
                                </ol>
                            </li>
                        </ul>
                    </div>
            </div>
}

export default ProductScreen;

Upvotes: 1

brk
brk

Reputation: 50291

This is because of this line const product = data.products.find(x => x._id === props.match.params.id); find method returns the value of the first element that satisfies the condition. Try by using filter

Upvotes: 2

Related Questions