Mixing
Render link only if props data contains a particular value
0
I'm trying to link employe names to CVs on an About page. However, some people do not have a CV. I want to remove the a tag/the link on the name if they do not have CV PDFs filled out in my JSON file. I know how to do this outside of React, I'm just unsure when the javascript needs to be in the render rather than return area, as I have my information set up.
import React, { Component } from 'react';
import Image from 'react-image-resizer';
import '../styles/PersonCard.css';
class PersonCard extends Component {
render() {
return (
<div className="card-container">
<div className="card">
<div className="side">
<Image
className="card-img-top"
src={process.env.PUBLIC_URL + "/images/bios/" + this.props.data.img_name}
height={249}
width={249}
/>
</div>
<div className="card-body">
<a href={process.env.PUBLIC_URL + "/pdfs/" + this.props.data.pdf}>
<h5 className="card-title">
{this.props.data.name + " " + this.props.data.credentials}
</h5>
</a>
<h6 className="card-text">{this.props.data.position}</h6>
<p className="card-text">{this.props.data.email}</p>
<p className="card-text">{this.props.data.phone}</p>
</div>
</div>
</div>
);
}
}
export default PersonCard;
P.S. The JSON is set up in this format:
{
"name": "John Smith",
"credentials": "PhD",
"position": "Professor",
"email": "jsmith@uni.edu",
"phone": "123-456-7890",
"designations": [
"Faculty"
],
"img_name": "JohnSmith.jpg",
"pdf": "jSmithCV.pdf"
}
javascript reactjs
edited Jan 2 at 22:42
Emile Bergeron
10.7k44672
asked Jan 2 at 22:26
RgreanerRgreaner
219
add a comment |
0
I'm trying to link employe names to CVs on an About page. However, some people do not have a CV. I want to remove the a tag/the link on the name if they do not have CV PDFs filled out in my JSON file. I know how to do this outside of React, I'm just unsure when the javascript needs to be in the render rather than return area, as I have my information set up.
import React, { Component } from 'react';
import Image from 'react-image-resizer';
import '../styles/PersonCard.css';
class PersonCard extends Component {
render() {
return (
<div className="card-container">
<div className="card">
<div className="side">
<Image
className="card-img-top"
src={process.env.PUBLIC_URL + "/images/bios/" + this.props.data.img_name}
height={249}
width={249}
/>
</div>
<div className="card-body">
<a href={process.env.PUBLIC_URL + "/pdfs/" + this.props.data.pdf}>
<h5 className="card-title">
{this.props.data.name + " " + this.props.data.credentials}
</h5>
</a>
<h6 className="card-text">{this.props.data.position}</h6>
<p className="card-text">{this.props.data.email}</p>
<p className="card-text">{this.props.data.phone}</p>
</div>
</div>
</div>
);
}
}
export default PersonCard;
P.S. The JSON is set up in this format:
{
"name": "John Smith",
"credentials": "PhD",
"position": "Professor",
"email": "jsmith@uni.edu",
"phone": "123-456-7890",
"designations": [
"Faculty"
],
"img_name": "JohnSmith.jpg",
"pdf": "jSmithCV.pdf"
}
javascript reactjs
edited Jan 2 at 22:42
Emile Bergeron
10.7k44672
asked Jan 2 at 22:26
RgreanerRgreaner
219
2
Possible duplicate of Advanced conditional component rendering in react
– Emile Bergeron
Jan 2 at 22:45
add a comment |
0
0
0
I'm trying to link employe names to CVs on an About page. However, some people do not have a CV. I want to remove the a tag/the link on the name if they do not have CV PDFs filled out in my JSON file. I know how to do this outside of React, I'm just unsure when the javascript needs to be in the render rather than return area, as I have my information set up.
import React, { Component } from 'react';
import Image from 'react-image-resizer';
import '../styles/PersonCard.css';
class PersonCard extends Component {
render() {
return (
<div className="card-container">
<div className="card">
<div className="side">
<Image
className="card-img-top"
src={process.env.PUBLIC_URL + "/images/bios/" + this.props.data.img_name}
height={249}
width={249}
/>
</div>
<div className="card-body">
<a href={process.env.PUBLIC_URL + "/pdfs/" + this.props.data.pdf}>
<h5 className="card-title">
{this.props.data.name + " " + this.props.data.credentials}
</h5>
</a>
<h6 className="card-text">{this.props.data.position}</h6>
<p className="card-text">{this.props.data.email}</p>
<p className="card-text">{this.props.data.phone}</p>
</div>
</div>
</div>
);
}
}
export default PersonCard;
P.S. The JSON is set up in this format:
{
"name": "John Smith",
"credentials": "PhD",
"position": "Professor",
"email": "jsmith@uni.edu",
"phone": "123-456-7890",
"designations": [
"Faculty"
],
"img_name": "JohnSmith.jpg",
"pdf": "jSmithCV.pdf"
}
javascript reactjs
edited Jan 2 at 22:42
Emile Bergeron
10.7k44672
asked Jan 2 at 22:26
RgreanerRgreaner
219
I'm trying to link employe names to CVs on an About page. However, some people do not have a CV. I want to remove the a tag/the link on the name if they do not have CV PDFs filled out in my JSON file. I know how to do this outside of React, I'm just unsure when the javascript needs to be in the render rather than return area, as I have my information set up.
import React, { Component } from 'react';
import Image from 'react-image-resizer';
import '../styles/PersonCard.css';
class PersonCard extends Component {
render() {
return (
<div className="card-container">
<div className="card">
<div className="side">
<Image
className="card-img-top"
src={process.env.PUBLIC_URL + "/images/bios/" + this.props.data.img_name}
height={249}
width={249}
/>
</div>
<div className="card-body">
<a href={process.env.PUBLIC_URL + "/pdfs/" + this.props.data.pdf}>
<h5 className="card-title">
{this.props.data.name + " " + this.props.data.credentials}
</h5>
</a>
<h6 className="card-text">{this.props.data.position}</h6>
<p className="card-text">{this.props.data.email}</p>
<p className="card-text">{this.props.data.phone}</p>
</div>
</div>
</div>
);
}
}
export default PersonCard;
P.S. The JSON is set up in this format:
{
"name": "John Smith",
"credentials": "PhD",
"position": "Professor",
"email": "jsmith@uni.edu",
"phone": "123-456-7890",
"designations": [
"Faculty"
],
"img_name": "JohnSmith.jpg",
"pdf": "jSmithCV.pdf"
}
javascript reactjs
javascript reactjs
edited Jan 2 at 22:42
Emile Bergeron
10.7k44672
asked Jan 2 at 22:26
RgreanerRgreaner
219
edited Jan 2 at 22:42
Emile Bergeron
10.7k44672
asked Jan 2 at 22:26
RgreanerRgreaner
219
edited Jan 2 at 22:42
Emile Bergeron
10.7k44672
edited Jan 2 at 22:42
Emile Bergeron
10.7k44672
edited Jan 2 at 22:42
Emile Bergeron
10.7k44672
10.7k44672
asked Jan 2 at 22:26
RgreanerRgreaner
219
asked Jan 2 at 22:26
RgreanerRgreaner
219
asked Jan 2 at 22:26
RgreanerRgreaner
219
219
2
Possible duplicate of Advanced conditional component rendering in react
– Emile Bergeron
Jan 2 at 22:45
add a comment |
2
Possible duplicate of Advanced conditional component rendering in react
– Emile Bergeron
Jan 2 at 22:45
2
2
Possible duplicate of Advanced conditional component rendering in react
– Emile Bergeron
Jan 2 at 22:45
Possible duplicate of Advanced conditional component rendering in react
– Emile Bergeron
Jan 2 at 22:45
add a comment |
1 Answer
1
active
oldest
votes
0
The easiest way in my opinion would be to create an extra component which will render its children:
const CVComponent = ({ children, pdf }) => pdf ? (
<a href={process.env.PUBLIC_URL + "/pdfs/" + pdf}>
{children}
</a>
) : <div>{children}</div>;
You can then use it like this:
class PersonCard extends Component {
render() {
return (
<div className="card-container">
<div className="card">
<div className="side">
<Image
className="card-img-top"
src={process.env.PUBLIC_URL + "/images/bios/" + this.props.data.img_name}
height={249}
width={249}
/>
</div>
<div className="card-body">
<CVComponent pdf={this.props.data.pdf}>
<h5 className="card-title">
{this.props.data.name + " " + this.props.data.credentials}
</h5>
</CVComponent>
<h6 className="card-text">{this.props.data.position}</h6>
<p className="card-text">{this.props.data.email}</p>
<p className="card-text">{this.props.data.phone}</p>
</div>
</div>
</div>
);
}
}
answered Jan 2 at 23:18
AxnyffAxnyff
4,41611226
1
Thank you so much, that worked perfectly!!
– Rgreaner
Jan 3 at 1:13
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54013976%2frender-link-only-if-props-data-contains-a-particular-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
The easiest way in my opinion would be to create an extra component which will render its children:
const CVComponent = ({ children, pdf }) => pdf ? (
<a href={process.env.PUBLIC_URL + "/pdfs/" + pdf}>
{children}
</a>
) : <div>{children}</div>;
You can then use it like this:
class PersonCard extends Component {
render() {
return (
<div className="card-container">
<div className="card">
<div className="side">
<Image
className="card-img-top"
src={process.env.PUBLIC_URL + "/images/bios/" + this.props.data.img_name}
height={249}
width={249}
/>
</div>
<div className="card-body">
<CVComponent pdf={this.props.data.pdf}>
<h5 className="card-title">
{this.props.data.name + " " + this.props.data.credentials}
</h5>
</CVComponent>
<h6 className="card-text">{this.props.data.position}</h6>
<p className="card-text">{this.props.data.email}</p>
<p className="card-text">{this.props.data.phone}</p>
</div>
</div>
</div>
);
}
}
answered Jan 2 at 23:18
AxnyffAxnyff
4,41611226
1
Thank you so much, that worked perfectly!!
– Rgreaner
Jan 3 at 1:13
add a comment |
0
The easiest way in my opinion would be to create an extra component which will render its children:
const CVComponent = ({ children, pdf }) => pdf ? (
<a href={process.env.PUBLIC_URL + "/pdfs/" + pdf}>
{children}
</a>
) : <div>{children}</div>;
You can then use it like this:
class PersonCard extends Component {
render() {
return (
<div className="card-container">
<div className="card">
<div className="side">
<Image
className="card-img-top"
src={process.env.PUBLIC_URL + "/images/bios/" + this.props.data.img_name}
height={249}
width={249}
/>
</div>
<div className="card-body">
<CVComponent pdf={this.props.data.pdf}>
<h5 className="card-title">
{this.props.data.name + " " + this.props.data.credentials}
</h5>
</CVComponent>
<h6 className="card-text">{this.props.data.position}</h6>
<p className="card-text">{this.props.data.email}</p>
<p className="card-text">{this.props.data.phone}</p>
</div>
</div>
</div>
);
}
}
answered Jan 2 at 23:18
AxnyffAxnyff
4,41611226
1
Thank you so much, that worked perfectly!!
– Rgreaner
Jan 3 at 1:13
add a comment |
0
0
0
The easiest way in my opinion would be to create an extra component which will render its children:
const CVComponent = ({ children, pdf }) => pdf ? (
<a href={process.env.PUBLIC_URL + "/pdfs/" + pdf}>
{children}
</a>
) : <div>{children}</div>;
You can then use it like this:
class PersonCard extends Component {
render() {
return (
<div className="card-container">
<div className="card">
<div className="side">
<Image
className="card-img-top"
src={process.env.PUBLIC_URL + "/images/bios/" + this.props.data.img_name}
height={249}
width={249}
/>
</div>
<div className="card-body">
<CVComponent pdf={this.props.data.pdf}>
<h5 className="card-title">
{this.props.data.name + " " + this.props.data.credentials}
</h5>
</CVComponent>
<h6 className="card-text">{this.props.data.position}</h6>
<p className="card-text">{this.props.data.email}</p>
<p className="card-text">{this.props.data.phone}</p>
</div>
</div>
</div>
);
}
}
answered Jan 2 at 23:18
AxnyffAxnyff
4,41611226
The easiest way in my opinion would be to create an extra component which will render its children:
const CVComponent = ({ children, pdf }) => pdf ? (
<a href={process.env.PUBLIC_URL + "/pdfs/" + pdf}>
{children}
</a>
) : <div>{children}</div>;
You can then use it like this:
class PersonCard extends Component {
render() {
return (
<div className="card-container">
<div className="card">
<div className="side">
<Image
className="card-img-top"
src={process.env.PUBLIC_URL + "/images/bios/" + this.props.data.img_name}
height={249}
width={249}
/>
</div>
<div className="card-body">
<CVComponent pdf={this.props.data.pdf}>
<h5 className="card-title">
{this.props.data.name + " " + this.props.data.credentials}
</h5>
</CVComponent>
<h6 className="card-text">{this.props.data.position}</h6>
<p className="card-text">{this.props.data.email}</p>
<p className="card-text">{this.props.data.phone}</p>
</div>
</div>
</div>
);
}
}
answered Jan 2 at 23:18
AxnyffAxnyff
4,41611226
answered Jan 2 at 23:18
AxnyffAxnyff
4,41611226
answered Jan 2 at 23:18
AxnyffAxnyff
4,41611226
answered Jan 2 at 23:18
AxnyffAxnyff
4,41611226
4,41611226
1
Thank you so much, that worked perfectly!!
– Rgreaner
Jan 3 at 1:13
add a comment |
1
Thank you so much, that worked perfectly!!
– Rgreaner
Jan 3 at 1:13
1
1
Thank you so much, that worked perfectly!!
– Rgreaner
Jan 3 at 1:13
Thank you so much, that worked perfectly!!
– Rgreaner
Jan 3 at 1:13
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54013976%2frender-link-only-if-props-data-contains-a-particular-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Possible duplicate of Advanced conditional component rendering in react
– Emile Bergeron
Jan 2 at 22:45