Create Programmable Route by comparing arrays and state in React
I want to create a category for different items. from an array, items are printed and those items will create specific route accordingly by comparing to other items in a different array and create a route for that.
FOR THE FIRST ARRAY
const categ = ['Sports', 'Entertainment', 'Politics', 'Global']
{ categ.map((category) => {
return (<NavLink to={`/${categoryLink}`} key={category}>{category}</NavLink>)
})}
(i have no idea how to make the 'categoryLink'
FOR THE SECOND ONE(NOT ACTUALLY AN ARRAY)
const debateTwo = store.dispatch(createDebate({
teamOneImg: <img src={Img} />,
teamTwoImg: <img src={Img} />,
startTime: 0,
debateDesc: 'Batman V Superman',
teamOneDesc: 'Batman ',
teamTwoDesc: 'Superman',
teamOneScore: '50',
teamTwoScore: '50',
category: 'Entertainment',
tags: '#
so when I compare both of them a link that shows for the category of 'Entertainment' it should show these items. How should I do that?
Or is there any other way to create a category in React. I am new to it. Please help me
reactjs frontend
asked Nov 26 '18 at 17:11
Raghav KattelRaghav Kattel
11
add a comment |
I want to create a category for different items. from an array, items are printed and those items will create specific route accordingly by comparing to other items in a different array and create a route for that.
FOR THE FIRST ARRAY
const categ = ['Sports', 'Entertainment', 'Politics', 'Global']
{ categ.map((category) => {
return (<NavLink to={`/${categoryLink}`} key={category}>{category}</NavLink>)
})}
(i have no idea how to make the 'categoryLink'
FOR THE SECOND ONE(NOT ACTUALLY AN ARRAY)
const debateTwo = store.dispatch(createDebate({
teamOneImg: <img src={Img} />,
teamTwoImg: <img src={Img} />,
startTime: 0,
debateDesc: 'Batman V Superman',
teamOneDesc: 'Batman ',
teamTwoDesc: 'Superman',
teamOneScore: '50',
teamTwoScore: '50',
category: 'Entertainment',
tags: '#
so when I compare both of them a link that shows for the category of 'Entertainment' it should show these items. How should I do that?
Or is there any other way to create a category in React. I am new to it. Please help me
reactjs frontend
asked Nov 26 '18 at 17:11
Raghav KattelRaghav Kattel
11
add a comment |
I want to create a category for different items. from an array, items are printed and those items will create specific route accordingly by comparing to other items in a different array and create a route for that.
FOR THE FIRST ARRAY
const categ = ['Sports', 'Entertainment', 'Politics', 'Global']
{ categ.map((category) => {
return (<NavLink to={`/${categoryLink}`} key={category}>{category}</NavLink>)
})}
(i have no idea how to make the 'categoryLink'
FOR THE SECOND ONE(NOT ACTUALLY AN ARRAY)
const debateTwo = store.dispatch(createDebate({
teamOneImg: <img src={Img} />,
teamTwoImg: <img src={Img} />,
startTime: 0,
debateDesc: 'Batman V Superman',
teamOneDesc: 'Batman ',
teamTwoDesc: 'Superman',
teamOneScore: '50',
teamTwoScore: '50',
category: 'Entertainment',
tags: '#
so when I compare both of them a link that shows for the category of 'Entertainment' it should show these items. How should I do that?
Or is there any other way to create a category in React. I am new to it. Please help me
reactjs frontend
asked Nov 26 '18 at 17:11
Raghav KattelRaghav Kattel
11
I want to create a category for different items. from an array, items are printed and those items will create specific route accordingly by comparing to other items in a different array and create a route for that.
FOR THE FIRST ARRAY
const categ = ['Sports', 'Entertainment', 'Politics', 'Global']
{ categ.map((category) => {
return (<NavLink to={`/${categoryLink}`} key={category}>{category}</NavLink>)
})}
(i have no idea how to make the 'categoryLink'
FOR THE SECOND ONE(NOT ACTUALLY AN ARRAY)
const debateTwo = store.dispatch(createDebate({
teamOneImg: <img src={Img} />,
teamTwoImg: <img src={Img} />,
startTime: 0,
debateDesc: 'Batman V Superman',
teamOneDesc: 'Batman ',
teamTwoDesc: 'Superman',
teamOneScore: '50',
teamTwoScore: '50',
category: 'Entertainment',
tags: '#
so when I compare both of them a link that shows for the category of 'Entertainment' it should show these items. How should I do that?
Or is there any other way to create a category in React. I am new to it. Please help me
reactjs frontend
reactjs frontend
asked Nov 26 '18 at 17:11
Raghav KattelRaghav Kattel
11
asked Nov 26 '18 at 17:11
Raghav KattelRaghav Kattel
11
asked Nov 26 '18 at 17:11
Raghav KattelRaghav Kattel
11
asked Nov 26 '18 at 17:11
Raghav KattelRaghav Kattel
11
asked Nov 26 '18 at 17:11
Raghav KattelRaghav Kattel
11
11
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
There is no specific way to create category in Reactjs. The way you're doing you have to create route and component for each one.
const categ = ['Sports', 'Entertainment', 'Politics', 'Global'];
For each item in array or any link you want to create, make a route and components.
<Route path="sports" component={Sports} />
<Route path="entertainment" component={Entertainment} />
Or
{ categ.map((category) => {
const link = category.toLowerCase();
return (<Route path=`${link}` component={category} />)
})}You should explicitly create component for each one, and import them with the same name.
But if you want to load data dynamically for each category:
Then create only one route for category like and give it an id or param name like categoryName.
<Route path="/category/:categoryName" component={category} />
Then create category Component and load data based on id for each category
imagine this as a category component:
const categ = ['Sports', 'Entertainment', 'Politics', 'Global']
function Category () {
// You can access the params (:/categoryName)
// you provide to route in this.props.params,
// like this.props.params.categoryName
const getCategoryData = categ.filter( category === this.props.params.categoryName
return (
<div>{
getCategoryData
}</div>
)This is a very simple example.I just want to give you an idea.
How to implement category depends on your model implementation not Reactjs library.
answered Nov 27 '18 at 12:13
ShahramShahram
1866
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
});
}
});
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%2f53485977%2fcreate-programmable-route-by-comparing-arrays-and-state-in-react%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
There is no specific way to create category in Reactjs. The way you're doing you have to create route and component for each one.
const categ = ['Sports', 'Entertainment', 'Politics', 'Global'];
For each item in array or any link you want to create, make a route and components.
<Route path="sports" component={Sports} />
<Route path="entertainment" component={Entertainment} />
Or
{ categ.map((category) => {
const link = category.toLowerCase();
return (<Route path=`${link}` component={category} />)
})}You should explicitly create component for each one, and import them with the same name.
But if you want to load data dynamically for each category:
Then create only one route for category like and give it an id or param name like categoryName.
<Route path="/category/:categoryName" component={category} />
Then create category Component and load data based on id for each category
imagine this as a category component:
const categ = ['Sports', 'Entertainment', 'Politics', 'Global']
function Category () {
// You can access the params (:/categoryName)
// you provide to route in this.props.params,
// like this.props.params.categoryName
const getCategoryData = categ.filter( category === this.props.params.categoryName
return (
<div>{
getCategoryData
}</div>
)This is a very simple example.I just want to give you an idea.
How to implement category depends on your model implementation not Reactjs library.
answered Nov 27 '18 at 12:13
ShahramShahram
1866
add a comment |
There is no specific way to create category in Reactjs. The way you're doing you have to create route and component for each one.
const categ = ['Sports', 'Entertainment', 'Politics', 'Global'];
For each item in array or any link you want to create, make a route and components.
<Route path="sports" component={Sports} />
<Route path="entertainment" component={Entertainment} />
Or
{ categ.map((category) => {
const link = category.toLowerCase();
return (<Route path=`${link}` component={category} />)
})}You should explicitly create component for each one, and import them with the same name.
But if you want to load data dynamically for each category:
Then create only one route for category like and give it an id or param name like categoryName.
<Route path="/category/:categoryName" component={category} />
Then create category Component and load data based on id for each category
imagine this as a category component:
const categ = ['Sports', 'Entertainment', 'Politics', 'Global']
function Category () {
// You can access the params (:/categoryName)
// you provide to route in this.props.params,
// like this.props.params.categoryName
const getCategoryData = categ.filter( category === this.props.params.categoryName
return (
<div>{
getCategoryData
}</div>
)This is a very simple example.I just want to give you an idea.
How to implement category depends on your model implementation not Reactjs library.
answered Nov 27 '18 at 12:13
ShahramShahram
1866
add a comment |
There is no specific way to create category in Reactjs. The way you're doing you have to create route and component for each one.
const categ = ['Sports', 'Entertainment', 'Politics', 'Global'];
For each item in array or any link you want to create, make a route and components.
<Route path="sports" component={Sports} />
<Route path="entertainment" component={Entertainment} />
Or
{ categ.map((category) => {
const link = category.toLowerCase();
return (<Route path=`${link}` component={category} />)
})}You should explicitly create component for each one, and import them with the same name.
But if you want to load data dynamically for each category:
Then create only one route for category like and give it an id or param name like categoryName.
<Route path="/category/:categoryName" component={category} />
Then create category Component and load data based on id for each category
imagine this as a category component:
const categ = ['Sports', 'Entertainment', 'Politics', 'Global']
function Category () {
// You can access the params (:/categoryName)
// you provide to route in this.props.params,
// like this.props.params.categoryName
const getCategoryData = categ.filter( category === this.props.params.categoryName
return (
<div>{
getCategoryData
}</div>
)This is a very simple example.I just want to give you an idea.
How to implement category depends on your model implementation not Reactjs library.
answered Nov 27 '18 at 12:13
ShahramShahram
1866
There is no specific way to create category in Reactjs. The way you're doing you have to create route and component for each one.
const categ = ['Sports', 'Entertainment', 'Politics', 'Global'];
For each item in array or any link you want to create, make a route and components.
<Route path="sports" component={Sports} />
<Route path="entertainment" component={Entertainment} />
Or
{ categ.map((category) => {
const link = category.toLowerCase();
return (<Route path=`${link}` component={category} />)
})}You should explicitly create component for each one, and import them with the same name.
But if you want to load data dynamically for each category:
Then create only one route for category like and give it an id or param name like categoryName.
<Route path="/category/:categoryName" component={category} />
Then create category Component and load data based on id for each category
imagine this as a category component:
const categ = ['Sports', 'Entertainment', 'Politics', 'Global']
function Category () {
// You can access the params (:/categoryName)
// you provide to route in this.props.params,
// like this.props.params.categoryName
const getCategoryData = categ.filter( category === this.props.params.categoryName
return (
<div>{
getCategoryData
}</div>
)This is a very simple example.I just want to give you an idea.
How to implement category depends on your model implementation not Reactjs library.
{ categ.map((category) => {
const link = category.toLowerCase();
return (<Route path=`${link}` component={category} />)
})}{ categ.map((category) => {
const link = category.toLowerCase();
return (<Route path=`${link}` component={category} />)
})}const categ = ['Sports', 'Entertainment', 'Politics', 'Global']
function Category () {
// You can access the params (:/categoryName)
// you provide to route in this.props.params,
// like this.props.params.categoryName
const getCategoryData = categ.filter( category === this.props.params.categoryName
return (
<div>{
getCategoryData
}</div>
)const categ = ['Sports', 'Entertainment', 'Politics', 'Global']
function Category () {
// You can access the params (:/categoryName)
// you provide to route in this.props.params,
// like this.props.params.categoryName
const getCategoryData = categ.filter( category === this.props.params.categoryName
return (
<div>{
getCategoryData
}</div>
)answered Nov 27 '18 at 12:13
ShahramShahram
1866
answered Nov 27 '18 at 12:13
ShahramShahram
1866
answered Nov 27 '18 at 12:13
ShahramShahram
1866
answered Nov 27 '18 at 12:13
ShahramShahram
1866
1866
add a comment |
add a comment |
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.
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%2f53485977%2fcreate-programmable-route-by-comparing-arrays-and-state-in-react%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
