I'm trying to open a new link (in this case, i've just included a dummy link : facebook.com) on a new tab upon clicking on the hover-img class. But I'm facing some trouble doing it. Below is a snippet of my code, would gladly appreciate the help.
<div className="container">
{data.map((d)=>(
<div className="item">
<img className="background-img" src={d.img} ></img>
<h3>{d.title}</h3>
<img
className="hover-img"
href="www.facebook.com"
src="asset/eye.png"
/>
</div>
))}
</div>
Instead of setting the href attribute, you could open a new window with window.open() on click.
<div className="container">
{data.map((d)=>(
<div className="item">
<img className="background-img" src={d.img} ></img>
<h3>{d.title}</h3>
<img
className="hover-img"
src="asset/eye.png"
alt="eye"
onClick={()=> window.open("https://www.facebook.com", "_blank")}
/>
</div>
))}
</div>
Related
I have problem with concatenating image src string with variable in TypeScript based Reactjs
I have such code in ReactJS
<div id="Result" className="flex w-100 justify-around">
{result.map((item,index)=>{
console.log(item);
//return /<div className="card" key={"item-"+item+index}>{item[1]['placeName']}</div>
return (
<div key={"item-"+item+index} className="item w-1/4 text-center text-white">
<div>
<img src="https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photo_reference=Aap_uEA7vb0DDYVJWEaX3O-AtYp77AaswQKSGtDaimt3gt7QCNpdjp1BkdM6acJ96xTec3tsV_ZJNL_JP-lqsVxydG3nh739RE_hepOOL05tfJh2_ranjMadb3VoBYFvF0ma6S24qZ6QJUuV6sSRrhCskSBP5C1myCzsebztMfGvm7ij3gZT&key="+{apiKey}/>
</div>
<div>
<p>{item[1]['placeName']}</p>
</div>
</div>
)
})}
</div>
But Typescript code shows identifier in + between key=" and {apiKey}
What am I doing wrong? Why + sign doesn't work in this case?
Below is a screenshot
change :
<img src="https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photo_reference=Aap_uEA7vb0DDYVJWEaX3O-AtYp77AaswQKSGtDaimt3gt7QCNpdjp1BkdM6acJ96xTec3tsV_ZJNL_JP-lqsVxydG3nh739RE_hepOOL05tfJh2_ranjMadb3VoBYFvF0ma6S24qZ6QJUuV6sSRrhCskSBP5C1myCzsebztMfGvm7ij3gZT&key="+{apiKey}/>
to :
<img src=`https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photo_reference=Aap_uEA7vb0DDYVJWEaX3O-AtYp77AaswQKSGtDaimt3gt7QCNpdjp1BkdM6acJ96xTec3tsV_ZJNL_JP-lqsVxydG3nh739RE_hepOOL05tfJh2_ranjMadb3VoBYFvF0ma6S24qZ6QJUuV6sSRrhCskSBP5C1myCzsebztMfGvm7ij3gZT&key=${apiKey}`/>
I changed my code so that it would bring in the information from cloud firestore instead of hardcoding it. This is my old code without firebase:
<div className="grid">
<div className="grid-child">
<img className="subImg" src={amsterdam}></img>
<p className="subImgTitle">Amsterdam</p>
<p className="subImgText">Hotels from £?</p>
</div>
<div className="grid-child">
<img className="subImg" src={london}></img>
<p className="subImgTitle">London</p>
<p className="subImgText">Hotels from £?</p>
</div>
<div className="grid-child">
<img className="subImg" src={madrid}></img>
<p className="subImgTitle">Madrid</p>
<p className="subImgText">Hotels from £?</p>
</div>
<div className="grid-child">
<img className="subImg" src={paris}></img>
<p className="subImgTitle">Paris</p>
<p className="subImgText">Hotels from £?</p>
</div>
</div>
And this is my new code with firebase:
destinations?.map(destination => {
return (
<div className="grid">
<div className="grid-child">
<img className="subImg" src={destination.img}></img>
<p className="subImgTitle">{destination.title}</p>
<p className="subImgText">Hotels from £{destination.price}</p>
</div>
</div>
)
})
In the original code, the images are all in a row however now they are all in one column. I am not too sure how to fix this so any help would be greatly appreciated. Thanks :)
If you compare the DOM rendered by each example, you will see that the problem is that in the first example you have a single <div className="grid"> but in the second you wrap each image in <div className="grid">. To fix this, just be sure to create only one grid:
<div className="grid">
{ destinations?.map(destination => {
return (
<div className="grid-child">
<img className="subImg" src={destination.img}></img>
<p className="subImgTitle">{destination.title}</p>
<p className="subImgText">Hotels from £{destination.price}</p>
</div>
)
})
}
</div>
As a next step, consider refactoring a GridChild component that encapsulates the HTML for each image in the grid.
How can i change an item in the menu to be set to active item?
Currently the first item "Home" is always set to be active item. The goal is that if I click on of the other items, then that item will be set to active and the other item will no longer be active.
return (
<div className="ui menu">
<Link to="/">
<img
style={{
padding: 20
}}
className="ui image"
src={Rmarketingv1}
alt="alt"
/>
</Link>
<div
style={{
margin: 40
}}
className="ui borderless horizontal right secondary menu"
>
<div className="active item">
<Link to="/">
<h2>
Home
</h2>
</Link>
</div>
<div className="item">
<Link to="/Service">
<h2>
Tjenester
</h2>
</Link>
</div>
<div className="item">
<Link to="/work">
<h2>
Jobbmuligheter
</h2>
</Link>
</div>
<div className="item">
<Link to="/contact">
<h2>
Kontakt
</h2>
</Link>
</div>
</div>
</div>
);
You can just make use of NavLink instead of Link. you can give it an activeClassName prop and whenever the route matches to prop that className will be added to that link.
read the documentation here:
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md
React router feeatures a <NavLink> property which features an activeClassName property. So to make things work, change your <Links> like this:
<div className="item">
<NavLink to="/" activeClassName="active">
<h2>
Home
</h2>
</NavLink>
</div>
Disclaimer: This will set the "active" class to your element and not your div like in your example above. Make sure to adjust the css code as well!
I am struggling with one idea and I need help.
I have a dropdown and dropup list and they contain the same 2 images(flags). In dropup list I select 1 flag and I want in other list to automaticlly be selected the remaining flag.
For now I have hard coded images but eventually I want to display them dynamically.
return (
<div className="container">
<div className={isClicked ? "div2" : "div1"}>
<div class="dropup">
<button class="dropbtn">Dropup</button>
<div class="dropup-content">
<a href="#">
<img src={logoEn} alt="logo" />
</a>
<a href="#">
<img src={logoDe} alt="logo" />
</a>
</div>
</div>
<input />
</div>
<div id="switch">
<button onClick={this.toggleBox}>
<img src={iconSwitch} alt="logo" />
</button>{" "}
</div>
<div className={isClicked ? "div1" : "div2"}>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">
<img src={logoEn} alt="logo" />
</a>
<a href="#">
<img src={logoDe} alt="logo" />
</a>
</div>
</div>
<input />
</div>
</div>
I want this to be solved in ReactJS, if anybody have some idea how to solve please let me know.
Br
C
I have a search component which brings along the assets as per the search done.The problem is that render is getting called with the correct collection of assets and moreover it shows up in the dom element.I fail to understand why doesn't it show up in the actual browser window.
{this.state.data.map(function (asset) {
// Asset Card
{
return (<AssetCard asset={asset} defaultValues={this.props.defaultValues}
allAssetDetails={this.state.data}
triggerGetAssetDocId={this.getAssetDocId} key={asset.code}/>);
}
}, this)}
This is kind of the parent component which calls the child component which actually displays the asset cards based on the search. The child component looks like,
<div className="card animated small fadeInDown">
{/* Card Overlay - Selection */}
<div className="select" onClick={this.selectAsset}>
<label>
<input
type="checkbox"
className="filled-in"
name={asset.thumbnails != null &&
asset.thumbnails[k]
}
/>
</label>
</div>
<div className="card-overlay modal-trigger" data-target="asset-detail" id={asset.docId}
dbId={asset.dbId} code={asset.code} key={asset.code}
onClick={(e) => this.props.triggerGetAssetDocId(e)}>
</div>
{/* Card Image */}
<div className="card-image">
</div>
<div className="card-details">
{/* Card Content */}
<div className="card-content">
<span className="asset-name truncate">{asset.title}</span>
<div className="right">
</div>
</div>
{/* Card Action */}
<div className="card-action">
<span className="views">
<span class="jdicon-eye-open jdicon"></span>
{asset.vcount}
</span>
<span className="downloads">
<span class="jdicon-download jdicon"></span>
{asset.dcount}
</span>
<div className="right">
{/* <a className="add-wishlist"/> */}
<span className="badge img-format" data-format={assetFormat}>
{assetFormat}
</span>
</div>
</div>
</div>
</div>
Can someone please point out where my approach could be wrong?
Your "asset" data that you are sending from your parent to child will be transferred via properties so can be assessed via "this.props" ,
Suppose if you want to get the title you can do this.props.asset.title.
Similarly, you can also access the other data.
Hope this will help you