I have a list of link-elements, the clicked link-element shall have another background-color. What is the best way to achieve that in react.js ?
render() {
return (
<div>
<Link></Link>
<Link></Link>
....
You should simply be able to apply the acctiveClassName attribute to the Link like so
<Link to="/about" activeClassName="active">About</Link>
see this link for more info.
Related
I am creating a website and in one place I use <Link to={product.id}> it does not show anything but when I wrote like this <p>{product.id}</p> it shows the id.
You can do the following
<Link
to={`/products/${product.id}`}
key={product.id}
>
...
</Link>
Here you can see my code in React.js
I want to have several modal windows in one React component. I tried to use Modal from “react-native”, but it didn’t work.
Now I’m trying to use my own realisation of modal window, you can see it here. I want to use this component for creating modal windows according to parameters.
Unfortunately, this component creates modal windows with default values (null). I have watched lots of tutorials, but I still don’t know how to fix it.
I will be very grateful for help.
I asume that you are passing some value to title.
You can add some ternary operators in the jsx structure:
<div className="modalTitle">{title ? title : "what ever value you want"}</div>
Or you can add/set loader:
return (
<>
{title ? (
<div>Your modal content here</div>
) : (
<div>Your loader here</div>
)}
</>
);
Is there a way to make the Fluent UI (formerly Office Fabric UI) Nav component correctly work replacing it's <a> element links with a custom link such as <Link> from Reach Router?
Fluent UI Nav provides an onRenderLink props but that only changes the inner content innermost <a> element. It leaves the outer wrapping element with a traditional <a> which causes full page re-renders when the user uses it.
It also provides the linkAs prop but that changes the entire content of the "Group Header" and takes a way all of the nice CSS styling advantages of using the Nav in the first place.
Is there a way to actually get this working?
I did a little more googling and found this codepen which uses LinkAs :
(props) => {
return <Link className={props.className} style={{color: 'inherit', boxSizing: 'border-box'}} to={props.href}>
<span style={{display: 'flex'}}>
{ !!props.iconProps && <Icon style={{margin: '0 4px'}} {...props.iconProps} /> }
{props.children}
</span>
</Link> ;
}
A little bit disappointing that you basically have to reverse engineer their CSS and render it yourself in order to get this working.
Right below the page you see a 'back to log' button. If someone clicks on that it will return to the left page. So in order to do so I thought using react router will do the job. But not sure how to fix that.Is there someone who can help me to point me to the right direction. Keep in mind that it will not open a new tab!
Link to working snippet to understand the bigger picture of my app. CodeSandBox snippet here
return (
<div>
{info.map((show: any) => {
console.log(show.show)
return (
<div key={show.show.id}>
<ReactMarkdown source={show.show.name}/>
{show.show.image && <img src={show.show.image.medium}/>}
{show.show.genres.map((showGenre: string, index: number) => {
return (
<div key={index}>
<ReactMarkdown source={showGenre}/>
</div>
)
})}
<div>
<Router>
<ul>
<li>
<Link to="/">See deta</Link>
</li>
</ul>
</Router>
</div>
</div>
)
})}
</div>
)
Check out this working example (I placed notes in each file):
https://codesandbox.io/s/modest-panini-hkzlv?file=/src/App.js
Overview:
there are several ways to do this
my suggestion is to use the history npm and create a history.js file
you will also need to use Router from react-router-dom
in your parent component, or in a Context provider, you can store your state
in the parent component, use react-router-dom Switch and Route to place routes
depending on implementation, conditionally render show route for async state update
in your search component, place all your Links using react-router-dom
on click Links should also update app's state of your specific selection
this selection gets passed to the show route/component
in the show component attach an on click that uses history.goBack and resets state
this might help you:
this.props.history.goBack();
it goes back to prev page
I am working on a portfolio and I'm using react.js. I simply want to click an image, for example, a StackOverflow icon, and be able to redirect to the page. I'm seeing all sorts of different ways to go about, yet I cannot get it to redirect.
I am using React-Bootstrap which I don't know if that is going to change anything.
export default class Home extends Component {
render() {
return (
<Grid>
<Jumbotron className="brainImg">
</Jumbotron>
<div class="footer"><center className="iconsBaby">
<Image src="giticon.png" className="githubIcon" to="https://github.com/Joeyryanbridges" />
<Image src="linkedinIcon.png" className="linkedinIcon" href="https://github.com/Joeyryanbridges" />
<Image src="SOFIcon.png" className="githubIcon" href="https://github.com/Joeyryanbridges" />
</center>
</div>
</Grid>
)
}
Thank you for looking.
Generally an Image component should not be a link on its own. What you should do is wrap your image component with an <a> tag or use the Link component if you're using react-router.
<a href="https://github.com/Joeyryanbridges">
<Image src="giticon.png" className="githubIcon" />
</a>
OR with react-router Link
<Link to="https://github.com/Joeyryanbridges">
<Image src="giticon.png" className="githubIcon" />
</Link>
This way the Image component is not concerned with redirects or changing URLs and that functionality is handled by the proper component or tag.
Always keep in mind that separation of concerns is very important when it comes to reusability and maintainability.
Just wrap tag inside an like this:
<a href="abc.com">
<Image src="abc.png" />
</a>
Or If you are using react-router,then you can do this:
import { Link } from "react-router-dom";
<Link to="www.abc.com">
<Image src="abc.png" />
</Link>
Hope this help:
1.You can first declare in the state
load:false
2.use the onClick event and call a function like -
<Image src="giticon.png" className="githubIcon" onClick={()=> handleClick()} />
Inside the function set load to true.
Now check the value of the load to direct to whatever you need.
I hope it works.
There is another method to it , which is just create a onclick attribute to your react element
<img src="<img-link>" alt="<alt-text>" onClick={link} />
and then outside the return statement of your react function you can use 2 methods to link the image which is
location.replace and location.href
both of which would have syntax as follow
window.location.href = "<link>";
and
window.location.replace("<link>");
the methode to use this both is as follow
const link= () => { //remember the onclick attribute mentioned in img tag is having name **link**
window.location.href = "<the-link-to-which-you-want-to-redirect";
}
in this way you can achive your desired output!!
line 6 contain the function and line 18 contain styled react image element... refer if you want
Note:-
window.locatio.replace("")
will replace the webpage , so some one clicking on the image would not be able to use back button of browser .
So use them according to your need!!
The easiest way I've found is to just make sure you add target="_blank" rel="noopener noreferrer" to your tag. Like this:
<a href={ resume } target="_blank" rel="noopener noreferrer">
<img className="resume" src={ resumeLogo } alt="Link to resume" />
</a>
To use an image as a link in React, wrap the image in an tag or a Link tag if using react-router. The image will get rendered instead of the link and clicking on the image will cause the browser to navigate to the specified page.
import {Link} from 'react-router-dom';
The function code can be as follows:
<div>
<Link to="/your-pagename-or-url">
<img src="https://hamedvahedi.com/sample.jpg" alt="" />
</Link>
</div>