I am trying to make it so that when the user clicks my label, it opens up a new tab with the specified URL. It currently is not working. Any ideas what I am doing wrong or need to do in my method?
rerouteToGoogle= () => {
return <Link to="google.com" />
}
<MediaQuery query="(min-width: 550px)">
<div style={styles.alignText}>
<Label color='green' basic onClick={this.rerouteToGoogle} >CSV</Label>
</div>
</MediaQuery>
in your case rerouteToGoogle renders a Link component. I believe what you're trying to achieve is opening the new tab link on click, not rendering it.
In this case just change your function to
rerouteToGoogle= () => window.open('www.google.com', "_blank")
The purpose of <Link> is to navigate from one route to another inside your React application, e.g. from /home to /about. If you want to open another site in a new tab, then you are not navigating inside the application and so you can't use <Link>.
In your case, a classic <a href="https://google.com" target="_blank"> will work.
So, to solve what you are trying to achieve, the easiest way is to add a <a> inside your <Label>:
<MediaQuery query="(min-width: 550px)">
<div style={styles.alignText}>
<Label color='green' basic>
CSV
</Label>
</div>
</MediaQuery>
Related
I am using a React functional component with ternary to toggle a show more feature. I would additionally like the following logic: if one of the toggles is true (showing more), then the others are false (not showing). Right now, they just stack on top of each other unless you specifically click the button for each to "off" again.
This is them in initial state:
const [showFirst, setShowFirst] = useState(false)
const [showSecond, setShowSecond] = useState(false)
Here's the login in the render to show one of the 'show mores':
<button
className="btn-show"
onClick={() => setShowFirst(!showFirst)}>
<p className="proj-name">86 List</p>
</button>
Here's how it displays in its proper place:
{showFirst ? (
<div className="hide-me">
<p className="proj-lang">Built with: React.js, Ruby on Rails, Postgresql, CSS</p>
<p className="proj-desc">86List is a community for service-industry professionals to talk about the clients that they serve. Built with Ruby on Rails and React.js, 86List requires login authentication and registration in order to view and interact with co-workers' posts. In future iterations, I want to allow users to create their own accounts and request to be a part of a community with a community leader's approval.</p>
<img className="proj-img" src="/assets/86list.png" alt="" />
<div className="proj-link-container">
<a className="proj-link" href="https://github.com/aawferris/86list" target="_blank" rel="noreferrer" alt="this repo's github">REPO</a>
<a className="proj-link" href="https://86list.netlify.app/" target="_blank" rel="noreferrer" alt="live site for this link">SITE</a>
</div>
</div>
) : (
<div></div>
)}
I have tried making a handleClick that would toggle each back to false and the current one true, but it didn't work. Here's an example:
const handleFirst = () => {
setShowFirst(!showFirst)
setShowSecond(showSecond)
}
Thanks in advance!
Andy
The Idea would be to have an array of objects where you have an attribute like
showMore: true/false and also some sort of an id like id: 1. Each time one of the buttons is clicked, you iterate over the array (which should be a state in the parent component), you set the showMore attribute of that clicked button to true and set all the other ones to false. Then you just set that array as your new State.
Basically I'm trying to remake some simple web page that I have initially created with HTML and CSS to be working rather on React. I managed to redo the page to correctly display when it was moved into React, however I don't really understand why the navigation links that I have on top do not take me to the corresponding section on the same page anymore as well as why the external links to the project sites also stopped working.
Here is the project link code:
import React from "react";
export default function ProjectTile(props) {
return (
<div className="project-tile" id={props.id}>
<a href={props.href} target="_blank" id={props.link_id}>
<img
className="project_screenshot"
src={props.img_src}
alt={props.img_alt}
/>
<p className="project_name">
<span className="brackets"><</span> {props.title}{" "}
<span className="brackets">/></span>
</p>
</a>
</div>
);
}
All props are getting mapped and loaded from the array with corresponding data where each object looks like this:
{
id: "tribute_page",
link_id: "https://codepen.io/konstantinkrumin/full/PooYQbG",
img_src: "https://i.imgur.com/ynRuzOQ.png",
img_alt: "tribute_page_screenshot",
title: "Tribute Page"
}
The navigation links used are the following:
import React from "react";
export default function Navbar() {
return (
<nav id="navbar">
<a className="nav-link" href="#welcome-section">
About
</a>
<a className="nav-link" href="#projects">
Projects
</a>
<a className="nav-link" href="#contact">
Contact
</a>
</nav>
);
}
And each section they refer to have an id corresponding to the href indicated above.
Here if the link to this project on codesandbox
P.S. Everything used to work correctly when it was on HTML.
Also the contact links that seem to be set in similar way as project links are working.
Here are two things I think I found out:
In the ProjectTile.js file, replace href = {props.href} by href={props.link_id and now project opens in codepen.
About the jump link you have made in nav-bar, I think it's because of problem of codesandbox.
If you manage to make your url to https://op6gq.csb.app#projects instead of https://op6gq.csb.app/#projects. That's gonna work.
Or directly visiting https://op6gq.csb.app/#welcome-section jump link too works well.
It looks like there's no href prop. Sounds like what you want is something like
href={`#${props.id}`}
which would evaluate to href="#tribute_page" in this example.
You Have to try that your page url become:
https://op6gq.csb.app#welcome-section
Not:
https://op6gq.csb.app/#welcome-section
please attend to that / in address bar!
<div class="flex">
<div class="layout-row layout-align-end-center">
{{#paper-button href="overview" raised=true primary=true}}Overview{{/paper-button}}
{{#paper-button href="incomes"}}Incomes{{/paper-button}}
{{#paper-button href="expenses"}}Expenses{{/paper-button}}
{{#paper-button href="settings"}}Settings{{/paper-button}}
</div>
</div>
So I am trying to set the raised=true whenever I am on certain page/template. The above code is from my application template. Is there any way of doing this using JS/Ember or should I just do it manually in each of my templates?
I think the best way to go is to write a custom component wrapping paper-button. ember-route-helpers gives you nice helpers to do that:
{{#paper-button
onclick={{transition-to #route)
href=(url-for #route)
raised=(is-active #route)
primary=(is-active #route)
}}
{{yield}}
{{/paper-button}}
Then you can use that component with {{#your-component route="settings"}}Settings{{/your-component}}.
It's important to understand that you should pass both the action and the href. Because then when people click on the button it will make a transition and dont reload the entire page, but rightlick->open and screenreaders are are not broken.
So I have a DIV element that, when pressed, I want to open a new tab in a different window. The only problem is, whenever the page is refreshed or any other div element is pressed, th function is initiated as well and opens a page in another window. I'll include my code below, but I'm not sure why this is happening seeing as how I'm using onClick={window.open("https://www.thechinesewriter.com") Like I said, I only want a new tab to open when the div is pressed, not when any other items on the page are clicked or even when the page itself is refreshed.
import React from "react";
import "./Column1.css";
class Column1 extends React.Component {
render() {
return(
<React.Fragment>
<div className="rectImage">
<img className="imagePost" src={this.props.image} />
</div>
<div onClick={window.open("https://www.thechinesewriter.com")} className="downloadBut1">
<h2>
Source
</h2>
</div>
<div className="downloadBut2">
<h2>
Repository
</h2>
</div>
</React.Fragment>
)
}
}
export default Column1;
You need to call the function as a callback like this.
<div onClick={() => window.open("https://www.thechinesewriter.com")} className="downloadBut1">
Otherwise this gets called every time the component gets rendered.
You use an expression, which will execute everytime the component is rendered.
<div onClick={window.open("https://www.thechinesewriter.com")} className="downloadBut1">
You probably mean to use a function
<div onClick={() => window.open("https://www.thechinesewriter.com")} className="downloadBut1">
I am trying to navigate to a new page(i.e when i click on a button it should open a new page, within the app)
This is first page
<dom-module id="project-view">
<template>
<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route
route="{{route}}"
pattern="/:name"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<iron-selector selected="[[routeData.name]]" attr-for-selected="data-page">
<a class="btn" data-page="Project" href="#/Project">Go to create project</a>
</iron-selector>
<iron-pages selected="[[routeData.name]]" attr-for-selected="name">
<create-project name="Project" route="{{subroute}}"></create-project>
</iron-pages>
</main>
</div>
<div>
</div>
</template>
<script>
Polymer({
is: 'project-view',
});
</script>
</dom-module>
so now when I click on the button "Go to create project", the create project is opening in the same page, instead of going to a new page.
the Url changes to /#/Project but it opens the create-project page just beneath the current page
where create-project is just a simple html form page.
I want to open the create project such that only create-project content appears on the page and not the fusion of previous page content with create-project page
Can I navigate to create-project ?
Is there anything I am missing, or is it even possible
Polymer's app-route is designed this way, to work with a "single page app" or SPA. You can create a link or button to show a completely separate page if you like, without the hash. /my-separate-page. But you'll lose everything from memory in your original Polymer based app.