Question 318617 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How do I separately render various items in a JSON array?

My JSON file looks like this:

{
        "id": "abc",
        "title": "Title1",
        "cover": "https://example.tld/pic0.jpg",
        "pictures": [
            "https://example.tld/pic1.jpg",
            "https://example.tld/pic2.jpg",
            "https://example.tld/pic3.jpg",
            "https://example.tld/pic4.jpg",
            "https://example.tld/pic5.jpg"
        ],
        "description": "Lorem ipsum...",
        "host": {
            "name": "John Appleseed",
            "picture": "https://example.tld/pic6.jpg"
        },
        "rating": "5",
        "location": "Paris",
        "equipments": [
            "1",
            "2",
            "3",
        ],
        "tags": [
            "Tag1",
            "Tag2"
        ]
    },

Below this array there are many more, with the exact same structure.

In React I’m trying to render every image separately, and each tag in its own <li>.
To do this I’ve created an element:

export const HousingPage = ({pictures, title, location, host, hostpic, tags, desctext, equiptext}) => {
    return (
        <div>
            <img src={pictures}/>
            <h1>{title}</h1>
            <p>{location}</p>
            <p>{host}</p>
            <img src={hostpic} />
            <li>{tags}</li>
            <div>
                <h2>Description</h2>
                <p>{desctext}</p>
            </div>
            <div>
                <h2>Équipements</h2>
                <p>{equiptext}</p>
            </div>
        </div>
    )
}

Then imported the JSON in App.js with const data = require("../datas/logements.json") and added the element:

<HousingPage pictures={housing.pictures} location={housing.location title={housing.title} ... />

However the tags render as a single line, and the single picture that’s rendered has a string with every single image URL as the src.
How do I select, for example, all the pictures in an array that has the id "abc" and render them separately? Same question for the tags.

Tags:

3

Answers


  1. 0

    This:

    <img src={pictures}/>

    Is trying to use an array as the value for src. The src needs to just be a single URL. To display multiple images, use multiple <img> elements. For example:

    { pictures.map((p, i) => <img key={i} src={p}/>) }
    Login or Signup to reply.
  2. 0

    In your case, you can render images using img tag like this:

    {pictures.map((picture, index) => <img key={index} src={p}> )}

    I put key attribute because React needs index to various elements rendered
    So your final code looks like this:

    export const HousingPage = ({pictures, title, location, host, hostpic, tags, desctext, equiptext}) => {
return (
    <div>
        {pictures.map((picture, index) => <img key={index} src={p}> )}
        <h1>{title}</h1>
        <p>{location}</p>
        <p>{host}</p>
        <img src={hostpic} />
        <li>{tags}</li>
        <div>
            <h2>Description</h2>
            <p>{desctext}</p>
        </div>
        <div>
            <h2>Équipements</h2>
            <p>{equiptext}</p>
        </div>
    </div>
)}

    You can increase your view with card or carrousel or other list your image.
    I hope help you

    Login or Signup to reply.
  3. 0

    You need to map the props "pictures" passed to HousingPage component, inside the component. You can modify your HousingPage component as below.

    function HousingPage(props) {
    return (
        <div>
            {props.pictures && props.pictures.map((picture, index) => (
                <img key={index} src={picture} />
            ))}

            <h1>{props.title}</h1>
            <p>{props.location}</p>
            <p>{props.host}</p>
            <img src={props.hostpic} crossOrigin="anonymous" />
            <li>{props.tags}</li>
            <div>
                <h2>Description</h2>
                <p>{props.desctext}</p>
            </div>
            <div>
                <h2>Équipements</h2>
                <p>{props.equiptext}</p>
            </div>
        </div>
    );
};

export default HousingPage;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search