I am having a problem where I am trying to use an array of data to render a <ul> element. In the code below the console.log's are working fine, but the list items aren't appearing.
<ul className="comments">
{
userComments && userComments.comments.data && userComments.comments.data.map(comment =>{
{console.log("users", comment.user)}
<li className="wraper" key={comment.id}>
<div className="comments-description">
<div className="comments-photo">
<img src="http://randomuser.me/api/portraits/men/84.jpg" alt="" />
</div>
<div className="comments_wrapper">
<div className="comments_details">
<h1>Mike Ross {comment.user}</h1>
<span className="days">testa</span>
</div>
<div className="comments_text">
{comment.value}
</div>
<div className="comments_edit-delete">
<button className="btn-danger">Delete</button>
<button className="btn-success">Edit</button>
</div>
</div>
<div className="comments_line"></div>
</div>
</li>
})
}
</ul>
Note: The data looks like this :
What am I doing wrong here?
Either use:
.map(comment => (<ul> ... </ul>))
or
.map(comment =>({
return (<ul> ... </ul>)
})
The brackets are wrong. Wrap your JSX in the round brackets ( )
.map(comment =>( <li> ... </li>)
Related
I'm trying to render the result of the function renderVerticalCards, but nothing is returned in the DOM, other than the outer divs (those from outside the function call). I have confirmed through the console, that the function is being called, so I'm guessing that my problem has to do with my use of curly brackets, but I have not been able to find a solution. Any suggestions?
view({ attrs }) {
console.log("In view", attrs);
console.log(attrs);
const renderVerticalCards = (cards) => {
console.log("in function")
return(
cards.map(card => {
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4-phone mdc-layout-grid__cell--span-3-tablet mdc-layout-grid__cell--span-4-desktop process-card">
<div class="process-card__number-container">
<div class="process-card__number-container__circle">
<div class="process-card__number-container__circle process-card__number-container__circle__number"> {card.Number} </div>
</div>
</div>
<div class=".tk-typography--title-md process-card__title"> {card.Title} </div>
<div class="mdc-typography--body preserve-linebreaks process-card__text"> {card.ContentText} </div>
<a class="mdc-button process-card__link" href={card.Link}> {card.LinkText} </a>
</div>
})
)
}
return (
<div class="mdc-layout-grid" style="padding-top:0">
<div class="mdc-layout-grid__inner">
{ renderVerticalCards(this.cards) }
</div>
</div>
)
}
Try:
cards.map(card => {
return (
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4-phone mdc-layout-grid__cell--span-3-tablet mdc-layout-grid__cell--span-4-desktop process-card">
<div class="process-card__number-container">
<div class="process-card__number-container__circle">
<div class="process-card__number-container__circle process-card__number-container__circle__number"> {card.Number} </div>
</div>
</div>
<div class=".tk-typography--title-md process-card__title"> {card.Title} </div>
<div class="mdc-typography--body preserve-linebreaks process-card__text"> {card.ContentText} </div>
<a class="mdc-button process-card__link" href={card.Link}> {card.LinkText} </a>
</div>
);
})
image src not working.
can anybody help me?
<div v-for="(item, index) in businessItems" :key="index" class="business-item">
<div class="item-wrap">
<div class="wishlist">
<i class="icon-wishlist-line"></i>
<i class="icon-wishlist d-none"></i>
</div>
<div class="image">
<img :src="require(`#/assets/images/business/${item.img_url}`)">
</div>
<h2 class="title">{{item.title}}</h2>
<StarRating :rate="item.rate" />
</div>
</div>
img src is bind with require from node.js but unfortunately is not working
How about use public path or path, I mean remove require
<img :src=`/assets/images/business/${item.img_url}`/>
And way i see it you can assert / for end tag
This code has not been tested but I'm sure it should do the trick. The most important is the getImg method which allows you to access require() and get the image path.
<template>
<div>
<div v-for="(item, index) in businessItems" :key="index" class="business-item">
<div class="item-wrap">
<div class="wishlist">
<i class="icon-wishlist-line"></i>
<i class="icon-wishlist d-none"></i>
</div>
<div class="image">
<img :src="getImg(item.img_url)">
</div>
<h2 class="title">{{item.title}}</h2>
<StarRating :rate="item.rate" />
</div>
</div>
</div>
</template>
<script>
import businessItems from '#/services/business';
export default {
data() {
return {
businessItems,
}
},
methods: {
getImg(url) {
return require(`#/assets/images/business/${url}`);
}
}
}
</script>
<style>
</style>
The snippet is
function addTabItems(tab, items) {
const tabItems = items.map((item) => `
<div class="bvb-cmp-grid__item">
<div class="bvb-comp-grid__item-head">
<img alt="grid-item" src="${item['image']}" class="bvb-cmp-grid__item-img">
<div class="bvb-cmp-grid__item-title">${item['title']}</div>
</div>
<div class="bvb-comp-grid__item-blocks">
${item['items'].map((block) => `
<div class="bvb-comp-grid__item-block">
<div class="bvb-comp-grid__item-block-title">${block['title']}</div>
<div class="bvb-comp-grid__item-block-content">${block['content']}</div>
</div>
`).join('')}
</div>
</div>
`).join('');
const $tabContent = $(`[data-bvb-cmp-grid-tab-content="${tab}"]`);
$tabContent.append(tabItems);
}
Need to achieve - building template by correct way.
How to escape attribue value src="${item['image']}" for preventing XSS atack?
I'm struggling to select my img Element in a list so i can switch its class on and off.
I've tried different way to select it but its the first picture of my list that lights up, even when mouseover on the second/third/... div of the list.
<ul>
<li>
<div class="container" onmouseover="toggleImgColor()" onmouseout="toggleImgColor()">
<div class="container-title">
<h3 class="title />
<img id="pic" class="greyImg" />
</div>
...
</div>
</li>
...
</ul>
Javascript
function toggleImgColor() {
$(this).find("img").toggleClass("greyImg");
}
You can do that something like this:
$(document).ready(function(){
$(".container").hover(function() {
$("#pic").toggleClass("greyImg");
});
});
Just pass this inside the toggleImgColor() in html like toggleImgColor(this), and catch that as parameter in javascript function. This will pass current hovered DOM object to toggleImgColor function and you can then use that to show that specific div.
HTML:
<ul>
<li>
<div class="container" onmouseover="toggleImgColor(this)" onmouseout="toggleImgColor(this)">
<div class="container-title">
<h3 class="title />
<img class="greyImg" />
</div>
...
</div>
</li>
...
</ul>
JavaScript:
function toggleImgColor(item) {
$(item).find("img").toggleClass("greyImg");
}
I am new to jQuery and am trying to write a script that will run through a menu list and display the correct background image based on the menu item. The menu list is going to be randomly populated so a script is necessary to load the correct image.
The problem is that the attribute where I am able to see which item the menu belongs to is not on the list item itself but on a div contained inside the list item. My question is is it possible to select a child element of the already selected element ?
E.g (the menuli a segment)
$(document).ready( function() {
$(menuli).each( function(index) {
$itemnumber = $(menuli a).attr("href");
switch($itemnumber) {
case 1:
$(this).css("background-image", "image01.jpg");
break;
}
});
});
This is more or less the script I am trying to get, where each list item is iterated through and depending on the href of the link inside the list item a background image is set to that list item.
EDIT
Here is my html:
<div id="divMenuSportGSXSports">
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=468&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl00_lnkSport" href="/Sport/Groups.aspx?IDSport=468&Antepost=0">
<span title="SOCCER">SOCCER</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=520&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl01_lnkSport" href="/Sport/Groups.aspx?IDSport=520&Antepost=0">
<span title="BASEBALL">BASEBALL</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=544&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl02_lnkSport" href="/Sport/Groups.aspx?IDSport=544&Antepost=0">
<span title="CRICKET">CRICKET</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=525&Antepost=0&Tema=Supabets)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl03_lnkSport" href="/Sport/Groups.aspx?IDSport=525&Antepost=0">
<span title="BASKETBALL">BASKETBALL</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=534&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl04_lnkSport" href="/Sport/Groups.aspx?IDSport=534&Antepost=0">
<span title="ICE HOCKEY">ICE HOCKEY</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=523&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl05_lnkSport" href="/Sport/Groups.aspx?IDSport=523&Antepost=0">
<span title="TENNIS">TENNIS</span>
</a>
</div>
</div>
</div>
Yes you can, use find
var parentElement = $('#someElement');
var childElement = parentElement.find('.child'); //where .child should be your child selector
Where as example code is not clear, I just gave answer to your question.
try to change this:
$(this).css("background-image", "image01.jpg");
to this:
$(this).children("div").css("background-image", "image01.jpg");
If you want to target the direct child of the element, better to use children() than find()
Please refer to this: What is fastest children() or find() in jQuery?