Button working on second click instead of first in Reactjs - javascript

I am i working on Reactjs/nextjs and right now in my page video with audio button,i want two things
1) I want "by default" there should be "bi bi-volume-mute" class in button instead of "bi bi-volume-down"
2) whenever i click on unmute ( after mute) then its not working with one click but if i click on second time then its working , in other words should be "mute or unmute" with single click
Here is my current code
function handleAudio() {
if (ref.current.paused) {
setMuted(false);
ref.current.play();
} else {
setMuted(true);
ref.current.pause();
}
}
<buton onClick={handleAudio} className="customAudioPlayerButton">
{!muted ? (
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
className="bi bi-volume-down"
viewBox="0 0 16 16"
>
<path d="M9 4a.5.5 0 0 0-.812-.39L5.825 5.5H3.5A.5.5 0 0 0 3 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 9 12V4zM6.312 6.39 8 5.04v5.92L6.312 9.61A.5.5 0 0 0 6 9.5H4v-3h2a.5.5 0 0 0 .312-.11zM12.025 8a4.486 4.486 0 0 1-1.318 3.182L10 10.475A3.489 3.489 0 0 0 11.025 8 3.49 3.49 0 0 0 10 5.525l.707-.707A4.486 4.486 0 0 1 12.025 8z" />
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
className="bi bi-volume-mute"
viewBox="0 0 16 16"
>
<path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04 4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04zm7.854.606a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z" />
</svg>
)}
</buton>


can you please try this function.
function handleAudio() {
if (muted) {
setMuted(false);
ref.current.play();
} else {
setMuted(true);
ref.current.pause();
}
}

Related

How can I make this React code shorter? I feel like I'm repeating myself

Hi I know there is a way to make this code shorter. I'm repeating myself and it's practically the same. It's supposed to be the profile page where I show my picture, and social media:
const Profile = () => {
return (
<div className="profile">
<div className="img-profile">
<img src="https://avatars.githubusercontent.com/u/65257680?v=4" alt="" class="img-fluid"></img>
</div>
<div className="flexbox-perfil">
<a href="https://www.linkedin.com/in/paulasierra7/" className="me-3">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" className="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>
</a>
<a href="https://github.com/paulasierra7/proyecto_react" className="me-3">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" className="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
<a href="https://www.instagram.com/paulasierra7/">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" className="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
</svg>
</a>
</div>
</div>
)
}
export default Profile
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Thanks!!

You can make a component that has an anchor element on top of an svg, since you have repeated this multiple times. Make a component like this:
const ClickableSvg = ({link, svg}) => {
return (
<>
<a href={link.url}>{link.text}</a>
{svg}
</>)
}
Then you could do something like this:
const Profile = () => {
const data = [...] //this contains objects with a link and svg.
return (
<div className="profile">
<div className="img-profile">
<img src="https://avatars.githubusercontent.com/u/65257680?v=4" alt="" class="img-fluid"></img>
</div>
<div className="flexbox-perfil">
{data.map((d)=> <ClickableSvg link={d.link} svg={d.svg} />)}
</div>
</div>
)
}
export default Profile
Where data in the code above is an array of objects that contain a link and svg property.

SortableJS Next and Previous Buttons don't call OnEnd function

I use the SortableJS library (SortableJS/Sortable) to reorder pictures. I placed buttons: Next and Previous on each pictures to facilitate movement in desktop mode.
The buttons work well but the problem is that the SortableJS: OnEnd function (which manages the processing of the indexes: oldIndex and newIndex) is not executed.
How can I make my buttons work so that sortableJS can get the new indexes to organize the photos?
Here is my code
<div class="pictures">
<div class="picture-item">
<img src="...mypicture.jpg...">
<div class="btn-nav">
<button type="button" class="sort-prev">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="arrow-left-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
</svg>
</button>
<button type="button" class="sort-next">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="arrow-right-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
</svg>
</button>
</div>
</div>
...
</div>
// Array populated from dropzoneJS upload
var pictures = [{filename:test.jpg, position:0},{filename:test2.jpg, position:1}, ...]
var sortable = new Sortable(document.getElementById('pictures'), {
onEnd:function(evt)
{
// Function work with drag and drop not button click !
console.log(pictures);
let oldIndex = evt.oldIndex,
newIndex = evt.newIndex;
pictures.splice(newIndex, 0, pictures.splice(oldIndex, 1)[0]);
pictures.forEach((picture, index) => picture.position = index);
updateHiddenField(pictures);
}
});
$(document).on('click', '.sort-prev', function(){
var current = $(this).closest('.picture-item');
current.prev().before(current);
});
$(document).on('click', '.sort-next', function(){
var current = $(this).closest('.picture-item');
current.next().after(current);
});

How to fill an svg image with specific length color

I need to implement star ratings in my app. But the designer only provided a border star image as attached. Now i need to repeat the svg and at the same time fill it according to the ratings as shown in second attached image. But I am not sure if filling the svg with specific width color is possible or not. I don't need full solution, any reference or concept answer is also welcome.
the provided star svg
and
the implementation needeed
The provided SVG code
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M9.177 7.72a.5.5 0 0 1-.376.273l-5.309.771a.5.5 0 0 0-.277.853l3.841 3.745a.5.5 0 0 1 .144.442l-.907 5.288a.5.5 0 0 0 .726.527l4.748-2.497a.5.5 0 0 1 .466 0l4.748 2.497a.5.5 0 0 0 .726-.527l-.907-5.288a.5.5 0 0 1 .143-.442l3.842-3.745a.5.5 0 0 0-.277-.853l-5.309-.771a.5.5 0 0 1-.376-.274l-2.375-4.81a.5.5 0 0 0-.896 0l-2.375 4.81zM12 6.52l-1.03 2.084a2.5 2.5 0 0 1-1.88 1.368l-2.302.334 1.665 1.624a2.5 2.5 0 0 1 .72 2.212l-.394 2.292 2.059-1.082a2.5 2.5 0 0 1 2.326 0l2.059 1.082-.393-2.292a2.5 2.5 0 0 1 .718-2.212l1.666-1.624-2.302-.334a2.5 2.5 0 0 1-1.882-1.368L12 6.52z" clip-rule="evenodd"/></svg>

Here are two quick hack solutions, both of which require modification of the SVG (and both of which could be modified in a more efficient way), and both of which use a gradient fill, the same basic idea that Robert Longson suggested above.
1. duplicate the path, fill with gradient
Duplicate the path so you have one copy for the border and one copy for the fill.
Remove the fill-rule="evenodd" from the first path so the interior isn't subtracted, thus getting filled too.
Fill the first path (the "back" one) with a gradient that uses hard stops to achieve your partial fill. (I've used orange here just so you can see which is which.)
You could fiddle with the specifics of the gradient to get it exactly where you want it of course. This is just a proof of concept.
svg {
max-width: 200px; /* not relevant */
}
.stop1 {
stop-color: orange;
}
.stop2 {
stop-opacity: 0;
}
path.fill {
fill: url(#gradient-fill);
}
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
<defs>
<linearGradient id="gradient-fill" x1="0" x2="1" y1="1" y2="0.5">
<stop class="stop1" offset="70%"/>
<stop class="stop2" offset="70%"/>
</linearGradient>
</defs>
<path class="fill" d="M9.177 7.72a.5.5 0 0 1-.376.273l-5.309.771a.5.5 0 0 0-.277.853l3.841 3.745a.5.5 0 0 1 .144.442l-.907 5.288a.5.5 0 0 0 .726.527l4.748-2.497a.5.5 0 0 1 .466 0l4.748 2.497a.5.5 0 0 0 .726-.527l-.907-5.288a.5.5 0 0 1 .143-.442l3.842-3.745a.5.5 0 0 0-.277-.853l-5.309-.771a.5.5 0 0 1-.376-.274l-2.375-4.81a.5.5 0 0 0-.896 0l-2.375 4.81zM12 6.52l-1.03 2.084a2.5 2.5 0 0 1-1.88 1.368l-2.302.334 1.665 1.624a2.5 2.5 0 0 1 .72 2.212l-.394 2.292 2.059-1.082a2.5 2.5 0 0 1 2.326 0l2.059 1.082-.393-2.292a2.5 2.5 0 0 1 .718-2.212l1.666-1.624-2.302-.334a2.5 2.5 0 0 1-1.882-1.368L12 6.52z"/>
<path fill-rule="evenodd" d="M9.177 7.72a.5.5 0 0 1-.376.273l-5.309.771a.5.5 0 0 0-.277.853l3.841 3.745a.5.5 0 0 1 .144.442l-.907 5.288a.5.5 0 0 0 .726.527l4.748-2.497a.5.5 0 0 1 .466 0l4.748 2.497a.5.5 0 0 0 .726-.527l-.907-5.288a.5.5 0 0 1 .143-.442l3.842-3.745a.5.5 0 0 0-.277-.853l-5.309-.771a.5.5 0 0 1-.376-.274l-2.375-4.81a.5.5 0 0 0-.896 0l-2.375 4.81zM12 6.52l-1.03 2.084a2.5 2.5 0 0 1-1.88 1.368l-2.302.334 1.665 1.624a2.5 2.5 0 0 1 .72 2.212l-.394 2.292 2.059-1.082a2.5 2.5 0 0 1 2.326 0l2.059 1.082-.393-2.292a2.5 2.5 0 0 1 .718-2.212l1.666-1.624-2.302-.334a2.5 2.5 0 0 1-1.882-1.368L12 6.52z"/>
</svg>
2. Same idea but with the inner and outer paths separated.
(If you're going to go this route you could just as easily create a path to define the shape of the fill.)
svg {
max-width: 200px; /* not relevant */
}
.stop1 {
stop-color: orange;
}
.stop2 {
stop-color: white;
}
path.inner {
fill: url(#gradient-fill);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<defs>
<linearGradient id="gradient-fill" x1="0" x2="1" y1="1" y2="0.5">
<stop class="stop1" offset="70%"/>
<stop class="stop2" offset="70%"/>
</linearGradient>
</defs>
<path class="outer" d="M9.18,8.57C9.1,8.71,8.96,8.82,8.8,8.84L3.49,9.61C3.22,9.65,3.03,9.9,3.07,10.18
c0.02,0.11,0.07,0.21,0.15,0.29l3.84,3.74c0.12,0.11,0.17,0.28,0.14,0.44l-0.91,5.29c-0.05,0.27,0.14,0.53,0.41,0.58
c0.11,0.02,0.22,0,0.32-0.05l4.75-2.5c0.15-0.08,0.32-0.08,0.47,0l4.75,2.5c0.24,0.13,0.55,0.04,0.68-0.21
c0.05-0.1,0.07-0.21,0.05-0.32l-0.91-5.29c-0.03-0.16,0.03-0.33,0.14-0.44l3.84-3.74c0.2-0.19,0.2-0.51,0.01-0.71
c-0.08-0.08-0.18-0.13-0.29-0.15L15.2,8.84c-0.16-0.02-0.3-0.13-0.38-0.27l-2.38-4.81c-0.12-0.25-0.42-0.35-0.67-0.23
c-0.1,0.05-0.18,0.13-0.23,0.23L9.18,8.57L9.18,8.57z"/>
<path class="inner" d="M12,7.37l-1.03,2.08c-0.36,0.74-1.07,1.25-1.88,1.37l-2.3,0.33l1.66,1.62c0.59,0.57,0.86,1.4,0.72,2.21
l-0.39,2.29l2.06-1.08c0.73-0.38,1.6-0.38,2.33,0l2.06,1.08l-0.39-2.29c-0.14-0.81,0.13-1.64,0.72-2.21l1.67-1.62l-2.3-0.33
c-0.81-0.12-1.52-0.63-1.88-1.37L12,7.37z"/>
</svg>

Add Event listener is not working in js inside wordpress theme environement

I am trying to add addEventListener in one of the span tag inside my header.php file but its not working I don't know why. I tried several times. I am working on wordpress theme. I am successfully imported the file. when i put alert('helllo word) outside addEvent listener it works but inside the addEvent listener nothing is working. Please help.
This is my code
header.php
<div class="header__menu">
<span class="header__menu_btn">
<svg class="header__menu_icon" width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-filter-left" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
</svg>
</span>
<!-- <svg width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg> -->
</div>
</nav>
</header>
<div class="header__sidenav">
<div class="header__sidenav_content">
<h1 >Hello From Drawer</h1>
</div>
</div>
header.js
const headerMenuIcon = document.getElementsByClassName("header__menu_btn");
const headerSideBar = document.querySelector("header__sidenav");
headerMenuIcon.addEventListener("click", function () {
headerSideBar.style.width = "100%";
alert("Hello world");
});

How can I change a filter icon status only on the selected item of a list of items in my Angular application?

I am working on an Angular application and I have the following problem. Into a component view I have something like this:
It shown a people list, as you can see next to each person there is a little funnel icon used to filter the output of another component using the selected person (this filter behavior works fine). Once that the funnel icon related to a specific person is clicked it change color to indicate that the filter is active on the specific person.
The problem is that clicking on the funnel icon related a specific person in my list, all the funnel icons of all the persons change color, in this way:
I was handling it in this way into my component view:
<p-orderList [value]="people" [listStyle]="{'height':'400px'}" header="People"
filter="filter" filterBy="name" filterPlaceholder="Filter by name" dragdrop="true">
<ng-template let-person pTemplate="item">
<div class="ui-helper-clearfix fc-event" style="background-color: transparent; color:black !important;border: 0px !important;">
<div class="container">
<div class="row">
<div class="col-sm">
<img src="assets/img/people/person-icon.png" style="display:inline-block;float: left; margin:2px 20px 2px 2px" width="48">
<div style="font-size:14px;margin:15px 5px 0 0">{{person.name}}</div>
</div>
<div class="col-sm">
<div class="people-operations-icons">
<button class="btn" (click)="onClickFilter(person, $event)">
<svg *ngIf="isFilterByPersonActive == false" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-funnel" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
</svg>
<svg *ngIf="isFilterByPersonActive == true" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-funnel-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</ng-template>
As you can see to choose the empty or the full funnel icon I am doing:
<button class="btn" (click)="onClickFilter(person, $event)">
<svg *ngIf="isFilterByPersonActive == false" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-funnel" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
</svg>
<svg *ngIf="isFilterByPersonActive == true" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-funnel-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z"/>
</svg>
</button>
So I am using this isFilterByPersonActive variable defined in my typescript code. This variable is false by default and when the user click the funnel it change status and become true.
The problem is that in this way it works on all the member of my list and not only on the selected one. How can I activate this behavior only on the selected item?

Create a component for single persona item and use it for rendering personas items in list. All of your items will have their personal state which u can mutate with its own value/data

Categories

Resources