Reputation: 87
I am creating a mini blog and would like to click on an article, which will direct me to a url containing the data from a clicked card.
Here is my app.js
file that contains the routes/paths.
I want the paths /spiritualwritings/writing and /historicalwritings/writing to render the {Writing} component, but pass props into it so it can render the actual article.
import React from 'react';
import './App.css';
import LandingPage from './pages/LandingPage/LandingPage';
import SpiritualWritings from './pages/SpiritualWritings/SpiritualWritings';
import HistoricalWritings from './pages/HistoricalWritings/HistoricalWritings';
import Writing from './pages/Writing/Writing';
import {Route,Router} from 'react-router-dom'
import history from './history';
function App() {
return (
<div className = "mainBackground">
<Router history = {history}>
<Route path = "/" component = {LandingPage} exact />
<Route path = "/spiritualwritings" component = {SpiritualWritings} exact/>
<Route path = "/historicalwritings" component = {HistoricalWritings} exact/>
<Route path = "/spiritualwritings/writing" component = {Writing} exact/>
<Route path = "/historicalwritings/writing" component = {Writing} exact/>
</Router>
</div>
);
}
export default App;
Here is my SpiritualWritings.jsx
source code
import React,{Component} from 'react';
import './SpiritualWritings.css';
import SiteHeader from '../../components/SiteHeader/SiteHeader';
import Footer from '../../components/Footer/Footer';
import {Grid,Card,Icon,Transition} from 'semantic-ui-react';
import { Link } from 'react-router-dom';
export default class SpiritualWritings extends Component{
state = {
open : false
}
componentDidMount(){
this.setState({
open: true
}
)
}
render () {
var articles = Array(15).fill({
header: "Article",
meta : "Date",
description : "Quick Summary",
content: "This is the actual content"
})
var auth = true;
var cardArray = articles.map((data,index) => (
<Transition
animation = "vertical flip"
duration = {500+index*100}
visible = {this.state.open}
>
<Card link color = {"blue"} as = {Link} to = "/spiritualwritings/writing">
<Card.Content textAlign = {"center"}>
<Card.Header>
{data.header + " " + index}
</Card.Header>
<Card.Meta>
{data.meta + " " + index}
</Card.Meta>
<Card.Description>
{data.description + " " + index}
</Card.Description>
</Card.Content>
</Card>
</Transition>
))
if (auth){
cardArray.unshift(
<Card link color = {"green"}>
<Card.Content textAlign = {"center"}>
<Card.Header >
Submit a New Writing
</Card.Header>
</Card.Content>
<Card.Content textAlign = {"center"} extra>
<Icon.Group size = {"big"}>
<Icon color = {"green"} name = {"pencil alternate"} />
<Icon color = {"green"} corner = {"bottom right"} name = {"plus"}/>
</Icon.Group>
</Card.Content>
</Card>
)
}
return(
<Grid stackable padded = {"vertically"} className = "spiritualPageGrid">
<SiteHeader></SiteHeader>
<div className = "spiritualPageMainRow">
<Card.Group stackable itemsPerRow = {6}>
{cardArray}
</Card.Group>
</div>
<Footer></Footer>
</Grid>
)
}
}
The line I'm focused on is:
<Card link color = {"blue"} as = {Link} to = "/spiritualwritings/writing">
My goal is to click on a card, and pass the data it contains to {Link} so that my Writing.jsx
file can render the article.
Here is my Writing.jsx
source code. I've only written the barebones, but I need someway to get my data from SpiritualWritings.jsx
import React from 'react';
import './Writing.css';
import SiteHeader from '../../components/SiteHeader/SiteHeader';
import Footer from '../../components/Footer/Footer';
import {Grid} from 'semantic-ui-react';
function Writing(){
return(
<Grid padded = {"vertically"} className = "writingPageGrid">
<SiteHeader></SiteHeader>
<Grid.Row className = "writingPageMainRow">
ARTICLE CONTENT HERE
</Grid.Row>
<Footer></Footer>
</Grid>
)
}
export default Writing;
Upvotes: 1
Views: 461
Reputation: 2227
you can use redirect of react-router-dom like this .
this.state = {
redirect: false,
data: null
}
redirectToWriting = (data) => {
this.setState({
redirect: true,
data
})
}
render(){
if (redirect) {
return <Redirect to={{
pathname: "/spiritualwritings/writing",
state: { this.state.data }
}}
/>
}
var cardArray = articles.map((data, index) => (
<Transition
animation="vertical flip"
duration={500 + index * 100}
visible={this.state.open}
>
<Card link color={"blue"} onClick={() => this.redirectToWriting(data)}>
<Card.Content textAlign={"center"}>
<Card.Header>
{data.header + " " + index}
</Card.Header>
<Card.Meta>
{data.meta + " " + index}
</Card.Meta>
<Card.Description>
{data.description + " " + index}
</Card.Description>
</Card.Content>
</Card>
</Transition>
))
return (
//your rest of code
)
}
and in your child component (Writing Component) you can get data as
console.log(this.props.location.state)
Upvotes: 1