Develop Reference

How to enable/add anchor tag to the string in ReactJS?

The follwing is the code I've written and when I rendered it, item.about which has <a> tag, cannot render it and [object Object] is being displayed instead of that JSX. JSON.stringify does not even render it.
export default function Team() {
const teamList = [
{
id: 1,
name: "User",
image: user,
designation: "User",
about:
"He created Zoom Church LK </a>}. Apart from shipping apps, He Writes/Produces/Performs Music.",
},
{
id: 2,
name: "User 2",
image: user,
designation: "User",
about:
`He created ${ Zoom Church LK }. Apart from shipping apps, He Writes/Produces/Performs Music.`,
},
];
return (
<section className="leading-relaxed max-w-screen-xl mt-12 mx-auto px-4 lg:px-8 mb-20">
<div className="space-y-3 text-center">
<h1 className="text-5xl text-gray-400 font-black">Meet Our Team</h1>
<p className="text-gray-500 max-w-lg mx-auto text-lg">
Focused. Improving. Data-driven.
</p>
</div>
<div className="mt-14 gap-4 sm:grid sm:grid-cols-2 lg:grid-cols-3">
{teamList.map((item) => (
<div className="space-y-3 mt-5" key={item.id}>
<div className="object-center lg:w-full rounded-lg card-zoom">
<img
src={item.image}
alt={item.name}
/>
</div>
<h4 className="text-xl text-gray-400 font-bold">{item.name}</h4>
<h5 className="text-lg text-gray-400 font-medium">
{item.designation}
</h5>
<p className="text-gray-500">{(JSON.stringify(item.about))}</p>
</div>
))}
</div>
</section>
);
}
What would be the best way to modify my component to be able to add links like this?

To render links change your teamList like this:-
const teamList = [
{
id: 1,
name: "User",
image: user,
designation: "User",
about: <>He created Zoom Church LK . Apart from shipping apps, He Writes/Produces/Performs Music.</>,
},
{
id: 2,
name: "User 2",
image: user,
designation: "User",
about: <>He created Zoom Church LK . Apart from shipping apps, He Writes/Produces/Performs Music.</>,
},
];
and then render it like this
<p className="text-gray-500">{item.about}</p>

// you have to use tags without ${} when
// you want to use them in strings
const teamList = [
{
id: 1,
name: "User",
image: user,
designation: "User",
about:
"He created <a href='https://hanancs.github.io/ZoomChurchLK'> Zoom Church LK </a>. Apart from shipping apps, He Writes/Produces/Performs Music.",
},
{
id: 2,
name: "User 2",
image: user,
designation: "User",
about:
`He created <a href='https://hanancs.github.io/ZoomChurchLK'> Zoom Church LK </a>. Apart from shipping apps, He Writes/Produces/Performs Music.`,
},
];
// you can use dangerouslySetInnerHTML to show
//html tag inside of strings.
return (
{teamList.map((team) => (
<div dangerouslySetInnerHTML={{ __html: team.about }} key={team.id} />
))}
)

map function running multiple times

I am using map function on this
<div className="about-sports">
<AboutHead head="Sports" />
<div className="sport-cards">
<Slider {...settings}>
{response.sport.map((sport, key) => {
return (
<div className="sport-card" key={key}>
<Card sx={{ maxWidth: 100 }}>
<CardMedia
component="img"
alt={sport.name}
height="100"
image={sport.sportImgURL}
className="about-img"
/>
<CardContent className="logo-name">{sport.name}</CardContent>
</Card>
</div>
);
})}
</Slider>
</div>
<Line width="100%" marginTop="15px" marginLeft="0px" />
</div>
response is state which contaions
sport: Array [ {…}, {…} ]
0: Object { id: "1526fad5-d14a-4636-b259-1c3f366bce9c", sports_id: "52304670-9efd-4b95-9799-c782ea8907c4", name: "Cricket", … }
1: Object { id: "5cdbc516-a78b-469b-9036-58cea1478d5d", sports_id: "08c56898-3a4e-4b07-86bc-101a0542253f", name: "Chess", … }
length: 2
as given length is 2 but component showing 4 cards

Show Less/Show More button using react hook?

This is my data, initially I want show only 4 albums on the page, then when a user click on Show More I want to load the next 4 albums. And when user click on the Show Less button, it goes back to the previous/initial state.
cardData: [
{
id: 1,
img: eight0eightheartbreak,
title: '808 & Heartbreak',
desc: 'desc 1'
},
{
id: 2,
img: collegedropout,
title: 'College Dropout',
desc: 'desc 2'
},
{
id: 3,
img: graduation,
title: 'Graduation',
desc: 'desc 3'
},
{
id: 4,
img: lateregistration,
title: 'Late Registration',
desc: 'desc 4'
},
{
id: 5,
img: MBDTF,
title: 'My Beatiful Dark Twisted Fantesy',
desc: 'desc 5'
},
{
id: 6,
img: TLOP,
title: 'The Life of Pablo',
desc: 'desc 6'
},
{
id: 7,
img: Ye,
title: 'Ye',
desc: 'desc 7'
},
{
id: 8,
img: yeezus,
title: 'Yeezus',
desc: 'desc 8'
},
{
id: 9,
img: JIK,
title: 'Jesus Is King',
desc: 'desc 9'
}
]
}
this is my code
const [readMore, setReadMore] = useState(false);
const [noOfElements, setnoOfElements] = useState(4);
const slice = Data.cardData.slice(0, noOfElements);
const loadMore = ()=>{
setnoOfElements(noOfElements + 4)
}
return (
<section className="py-4 container">
<div className="row justify-content-center">
{slice.map((item, index)=>{
return(
<div className= "col-11 col-md-6 col-lg-3 max-0 mb-4">
<div className="card p-0 overflow-hidden h-100 shadow">
<img src={item.img} alt="" className="card-img-top" />
<div className="card-body">
<h5 className="card-title">{item.title}</h5>
<p className="card-text">{item.desc}</p>
</div>
</div>
</div>
)
})}
</div>
<button className="btn btn-dark d-block-w-100" onClick={()=>loadMore()} >
Read more
</button>
</section>
)
}
I have managed to create a Show more button, now how do I create Show Less button using the same logic, react useState hook? I know how to make it using component, but I want to do it using useState, is there anyway I can do it?

You can just put a conditional tag in your slice.map:
{slice.map((item, index)=>{
if( index <= noOfElements ){
return <div className= "col-11 col-md-6 col-lg-3 max-0 mb-4">...</div>
}
}

const [readMore, setReadMore] = useState(false);
const [noOfElements, setnoOfElements] = useState(4);
const slice = Data.cardData.slice(0, noOfElements);
const loadMore = ()=>{
setnoOfElements(noOfElements + 4)
}
const loadLess = ()=>{
setnoOfElements(noOfElements - 4)
}
return (
<section className="py-4 container">
<div className="row justify-content-center">
{slice.map((item, index)=>{
return(
<div className= "col-11 col-md-6 col-lg-3 max-0 mb-4">
<div className="card p-0 overflow-hidden h-100 shadow">
<img src={item.img} alt="" className="card-img-top" />
<div className="card-body">
<h5 className="card-title">{item.title}</h5>
<p className="card-text">{item.desc}</p>
</div>
</div>
</div>
)
})}
</div>
<button className="btn btn-dark d-block-w-100" onClick={()=>loadMore()} >
Read more
</button>
<button className="btn btn-dark d-block-w-100" onClick={()=>loadLess()} >
Read less
</button>
</section>
)
Is this is you actually needed?

Display an array of objects on a page

I'm trying to render objects that are in an array into my DOM.
I'm trying to display each object in its own card for viewing (using Tailwind css).
I'm fairly new to coding so I feel like it's something very simple that I'm overlooking here. Any help would be greatly aprpeciated!
const productsDOM = document.querySelector(`.products`);
const itemObject = [{
title: "Chocolate",
price: 10.99,
id: 1,
img: "https://images.pexels.com/photos/1055272/pexels-photo-1055272.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Whipped Cream",
price: 12.99,
id: 2,
img: "https://images.pexels.com/photos/1055270/pexels-photo-1055270.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
}, {
title: "White Frosting",
price: 12.99,
id: 3,
img: "https://images.pexels.com/photos/1055271/pexels-photo-1055271.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Berry",
price: 14.99,
id: 4,
img: "https://images.pexels.com/photos/3081657/pexels-photo-3081657.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Deluxe",
price: 19.99,
id: 5,
img: "https://images.pexels.com/photos/1998634/pexels-photo-1998634.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Oreo",
price: 14.99,
id: 6,
img: "https://images.pexels.com/photos/783274/pexels-photo-783274.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}];
function displayProducts() {
let html = ``;
itemObject.forEach(() => {
html += `
<div id="item-1" class="bg-white rounded-lg">
<img class="rounded-md w-screen object-cover max-h-60"
src="${itemObject.img}"
alt="">
<div class="py-2 px-8 text-gray-600">
<div class="grid grid-cols-2 py-3 text-xl font-bold ">
<h3>${itemObject.title}</h3>
<p class="text-right">$${itemObject.price}</p>
</div>
<button data-id=${itemObject.id}
class="bg-purple-200 font-bold px-3 mt-2 text-xl py-4 w-full rounded-md transition-all hover:bg-purple-300">Purchase</button>
</div>
</div>
`;
});
productsDOM.innerHTML = html;
}

You can use for loop, or even forEach() create Element, it doesn't matter it will be div, span, h1 or what and use innerText to declare your object names as text, and call your DOM Element before you use for loop and append them as child in your Element via .appendChild
In that case I used template strings it is easier to use, when you have to append lot of data from object
For Loop
const container = document.querySelector(".container")
const data = [
{name: "george", age: 12},
{name: "Maria", age: 35},
{name: "Lucas", age: 65}
]
for(let i = 0; i < data.length; i++){
const usersBox = document.createElement("div")
usersBox.className = "usersBox"
const list = document.createElement("p")
list.innerText = `${data[i].name}: ${data[i].age}`
usersBox.appendChild(list)
container.appendChild(usersBox)
}
.usersBox{
display: flex;
border: 2px solid black
}
<div class="container">
</div>
.forEach()
const container = document.querySelector(".container")
const data = [
{name: "george", age: 12},
{name: "Maria", age: 35},
{name: "Lucas", age: 65}
]
data.forEach(users => {
const usersBox = document.createElement("div")
usersBox.className = "usersBox"
const list = document.createElement("p")
list.innerText = `${users.name}: ${users.age}`
usersBox.appendChild(list)
container.appendChild(usersBox)
})
.usersBox{
display: flex;
border: 2px solid black;
}
<div class="container">
</div>

You forgot to "capture" each element in your array inside forEach function:
itemObject.forEach((item) => {
Once that's done, you can use item instead of itemObject inside your template. Also ID must be unique, so you can capture index of current item in the array as well and use it in your template:
itemObject.forEach((item, index) => {
const productsDOM = document.querySelector(`.products`);
const itemObject = [{
title: "Chocolate",
price: 10.99,
id: 1,
img: "https://images.pexels.com/photos/1055272/pexels-photo-1055272.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Whipped Cream",
price: 12.99,
id: 2,
img: "https://images.pexels.com/photos/1055270/pexels-photo-1055270.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
}, {
title: "White Frosting",
price: 12.99,
id: 3,
img: "https://images.pexels.com/photos/1055271/pexels-photo-1055271.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Berry",
price: 14.99,
id: 4,
img: "https://images.pexels.com/photos/3081657/pexels-photo-3081657.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Deluxe",
price: 19.99,
id: 5,
img: "https://images.pexels.com/photos/1998634/pexels-photo-1998634.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Oreo",
price: 14.99,
id: 6,
img: "https://images.pexels.com/photos/783274/pexels-photo-783274.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}];
function displayProducts() {
let html = ``;
itemObject.forEach((item,index) => {
html += `
<div id="item-${index}" class="bg-white rounded-lg">
<img class="rounded-md w-screen object-cover max-h-60"
src="${item.img}"
alt="">
<div class="py-2 px-8 text-gray-600">
<div class="grid grid-cols-2 py-3 text-xl font-bold ">
<h3>${item.title}</h3>
<p class="text-right">$${item.price}</p>
</div>
<button data-id=${item.id}
class="bg-purple-200 font-bold px-3 mt-2 text-xl py-4 w-full rounded-md transition-all hover:bg-purple-300">Purchase</button>
</div>
</div>
`;
});
productsDOM.innerHTML = html;
}
displayProducts();
<div class="products"></div>

you have problem in your forEach loop, try this :
function displayProducts() {
let html = ``;
itemObject.forEach((el) => {
html += `
<div id="item-1" class="bg-white rounded-lg">
<img class="rounded-md w-screen object-cover max-h-60"
src="${el.img}"
alt="">
<div class="py-2 px-8 text-gray-600">
<div class="grid grid-cols-2 py-3 text-xl font-bold ">
<h3>${el.title}</h3>
<p class="text-right">$${el.price}</p>
</div>
<button data-id=${itemObject.id}
class="bg-purple-200 font-bold px-3 mt-2 text-xl py-4 w-full rounded-md transition-all hover:bg-purple-300">Purchase</button>
</div>
</div>
`;
});
productsDOM.innerHTML = html;
}

Saving the position of items in the Sortable component

I'm using UIKit (GetUIKit) within Vue.js. I have 3 lists of objects (id, picture) that I drag across. I would like to save the position of the pictures in each list but the arrays don't seem to have changed and I don't know how to find which array it has be dropped into.
<template>
<div class="uk-child-width-1-4#s" uk-grid>
<div>
<h4>Selected products</h4>
<div
uk-sortable="group: sortable-group"
v-for="product in selectedProducts"
v-bind:key="product.id"
v-on:stop="greet(product.id, selectedProducts, outfit1, outfit2)"
>
<div class="uk-card uk-card-small uk-card-default uk-card-body">
<img v-bind:src="product.image">
</div>
</div>
</div>
<div>
<h4>Outfit 1</h4>
<div
uk-sortable="group: sortable-group"
v-for="product in outfit1"
v-bind:key="product.id"
v-on:stop="greet(product.id, selectedProducts, outfit1, outfit2)
>
<div class="uk-card uk-card-small uk-card-default uk-card-body">
<img v-bind:src="product.image">
</div>
</div>
</div>
<div>
<h4>Outfit 2</h4>
<div
uk-sortable="group: sortable-group"
v-for="product in outfit2"
v-bind:key="product.id"
v-on:stop="greet(product.id, selectedProducts, outfit1, outfit2)"
>
<div class="uk-card uk-card-small uk-card-default uk-card-body">
<img v-bind:src="product.image">
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedProducts: [
{
id: 1,
name: "Cool top",
image:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfpwfhIA_q8BvD5Hj6TKHfTd0fhfaNQcYKPlBcww6aZXWUOE3R"
},
{
id: 2,
name: "Fun jeans",
image:
"https://wwws.dior.com/couture/ecommerce/media/catalog/product/cache/1/grid_image_8/460x497/17f82f742ffe127f42dca9de82fb58b1/U/d/1550571393_922P02A3932_X5846_E08_GH.jpg"
}
],
outfit1: [
{
id: 3,
name: "shoes",
image: "https://images.vans.com/is/image/Vans/D3HY28-HERO?$583x583$"
}
],
outfit2: [
{
id: 4,
name: "scarf",
image:
"https://www.brontebymoon.co.uk/wp-content/uploads/2017/04/TAR80-A01-Lambswool-Tartan-Scarf-Antique-Dress-Stewart.jpg"
}
]
};
},
methods: {
greet: function(position, ) {
// This is where I want to save the position, for ex: {outfit1: [id: 1,2], outfit2: [id: 3], selectedProduct: [id: 4]}
console.log(position);
}
}
};
</script>
I want to save the position, for ex: {outfit1: [id: 1,2], outfit2: [id: 3], selectedProduct: [id: 4]} but I'm stuck. Any ideas?
Thank you!