We Keep Coding

How to pass props from from parent to grand child when using react-router--dom <Link>?

I sending image path data from parent component(TaskSubmissions.js component) to child component(Card.js component) and same image path data I want to pass child component of Card which is CardDetail.js.
Problem is data is passed from TaskSubmissions.js to Card.js but it's not getting passed from Card.js to DetailCard.js
I am using react-router-dom . To understand it better below I am sharing all three components code. I'll appreciate your help.
P.S I am new to react and trying to understand the flow with such experiments.
Data Flow = image URL is passing from TaskSubmission.js to -> Card.js to -> DetailCard.js
Parent Component TaskSubmissions.js
import React from "react";
import Card from "../components/Card";
const TaskSubmissions = () => {
return (
<div className="container-fluid">
<div className="row justify-content-center mt-5">
<h1 className="text-info display-4 text-center">
Review All Students Task!
</h1>
</div>
<div className="row justify-content-center">
<p className="lead text-center">Rate your students performance</p>
</div>
<div className="row justify-content-center mt-5">
<div className="col-lg-3 col-md-4 col-sm-12">
<Card
name="Jane"
path="https://source.unsplash.com/aob0ukAYfuI/400x300"
/>
</div>
</div>
</div>
);
};
export default TaskSubmissions;
Child Component Card.js
import React from "react";
import { Link } from "react-router-dom";
const Card = (props) => {
return (
<div className="container-fluid">
<div className="row">
<h4 className="card-title">{props.name}</h4>
<Link
to={{
pathname: "/detail",
state: { imgpath: props.path, name: props.name },
}}
className="d-block mb-4 h-100"
>
<img
className="img-fluid img-thumbnail"
src={props.path}
alt="image"
/>
</Link>
</div>
</div>
);
};
export default Card;
GrandChild Component CardDetail.js
import React from "react";
import { useLocation } from "react-router";
const CardDetail = (props) => {
const data = useLocation();
return (
<div className="container-fluid">
<div className="row justify-content-center">
<div className="card mb-3">
<img src={data.imgpath} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">{data.name}</h5>
<p className="card-text">Assignment 1 is completed.</p>
<p className="card-text">
<small className="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
</div>
);
};
export default CardDetail;

Try accessing it differently. You are currently doing const data = useLocation(); and then data.imgpath. Have you tried console.log(data)?
I would suggest the following change:
<img src={data.state.imgpath} className="card-img-top" alt="..."/>
<h5 className="card-title">{data.state.name}</h5>
Since you've stored it in
{{pathname: "/detail", state: {imgpath: props.path, name: props.name}}}
So it is held in data.state.
data Object should look something like this:
{
...
pathname: '/detail',
state: {
name: 'bar',
imgpath: 'foo'
}
}

How can I use nested routes with props for a child component

I'm building an react app where I have a feed component and the feed component consists of array of post components. The post component contains a link in it for viewing the full post component. I'm not able to pass the respective props to the full post component. I'm not able to do a nested route for the fullpost component.
this is my layout component
import React, { Component } from "react";
import Header from "../Header/Header";
import classes from "./Layout.css";
import { Route, Switch } from "react-router-dom";
import FullPost from "../Feed/FullPost/FullPost";
import axios from "axios";
import Feed from "../Feed/Feed";
class Layout extends Component {
state = {
users: [],
};
componentDidMount() {
axios
.get("https://goodwill-60d8a.firebaseio.com/Users.json")
.then((response) => {
this.setState({ users: response.data });
});
}
render() {
console.log(this.state.users);
return (
<div className={classes.main}>
<div>
<Header />
</div>
<div className={classes.content}>
<Switch>
<Route
path="/"
exact
render={() => <Feed users={this.state.users} />}
/>
<Route path="/fullpost" exact render={() => <FullPost />} />
</Switch>
</div>
</div>
);
}
}
export default Layout;
FEED component
import React from "react";
import Post from "./Post/Post";
import classes from "./Feed.css";
const feed = (props) => {
const feedItems = Object.keys(props.users).map((key) => ({
id: key,
...props.users[key],
}));
return (
<div className={classes.feed}>
{feedItems.map((items) => (
<Post
key={items.id}
profilename={items.profileName}
profilepic={items.profilePic}
timestamp={items.timeStamp}
contentimage={items.contentImage}
contenttext={items.contentText}
trend={items.trend}
></Post>
))}
</div>
);
};
export default feed;
Post component
import React from "react";
import classes from "./Post.css";
import ShareButton from "../../UI/ShareButton/ShareButton";
import { Link } from "react-router-dom";
const post = (props) => {
return (
<div className={classes.post}>
<div className={classes.header}>
<div className={classes.profileimage}>
<img className={classes.pic} src={props.profilepic} alt="" />
</div>
<div className={classes.name}>{props.profilename}</div>
<div className={classes.timestamp}>{props.timestamp}</div>
</div>
<div className={classes.container}>
<div className={classes.image}>
<img src={props.contentimage} alt="" />
</div>
<div>
<div className={classes.text}>
<span>{props.contenttext}</span>
</div>
<div className={classes.fullpost}>
<Link to="/fullpost" {...props}>
See Full Post
</Link>
</div>
</div>
</div>
<div className={classes.footer}>
<div className={classes.trend}>
<span>{props.trend}</span>
</div>
<ShareButton />
</div>
</div>
);
};
export default post;
Full Post component
import React from "react";
import classes from "./FullPost.css";
import pic from "../../../Assets/Images/self.jpg";
import { Link } from "react-router-dom";
const fullPost = (props) => {
return (
<div className={classes.fullpost_container}>
<div className={classes.photo_container}>
<img src={props.profilepic} alt=" " />
</div>
<div className={classes.sidebar}>
<div className={classes.profileimage}>
<img src={props.profilePic} alt="" />
</div>
<div className={classes.profilename}>Tony Kroos</div>
<div className={classes.timestamp}>3 Hours Ago</div>
</div>
<div className={classes.feedlink}>
<Link to="/" className={classes.feedlink_text}>
See more posts
</Link>
</div>
</div>
);
};
export default fullPost;

how to show specific post details by clicking using react-router-parameters?

I'm using map to view all posts using axios. And I just want show when I click a specific post to see more information. I'm using react parameters. But it's not working.
Here is my one component
import React, {Component} from 'react';
import Album from './album'
import {Link, BrowserRouter as Router, Route} from 'react-router-dom'
import axios from "axios"
class ViewDataAPI extends Component{
state = {
posts: []
}
componentDidMount(){
axios.get('https://jsonplaceholder.typicode.com/comments')
.then(response => {
this.setState({
posts: response.data
})
})
.catch(error => console.log('error'))
}
render(){
let { posts } = this.state
if(posts.length === 0){
return <h1>Loading...</h1>
}
else{
return(
<Router>
<div className="header">
<div className="container">
<div className="row">
<div className="col-lg-12 col-sm-12 col-xs-12">
<div className="text-center mb-20">
<h1>View Data From API</h1>
<p>using jsx-component, props, state, map in react </p>
</div>
</div>
</div>
<div className="row">
{
posts.map(post =>
{
return (
<Album
key={post.id}
name={post.name}
email = {post.email}
body = {post.body}
view = {post.id}
/>
)
}
)
}
</div>
{/* here is im using params, and to match by clicking specific id to show/view more information */}
<div className="row">
{posts && (
<Route path="/album/:albumId"
render = {({match}) => (
<ViewPosts {...posts.find(pv => pv.id === match.params.albumId)} />
)}
/>
)}
</div>
</div>
</div>
</Router>
)
}
}
}
export default ViewDataAPI;
// This component using for show details
const ViewPosts = ({posts}) =>{
return(
<div className="col-lg-6">
<div className="card border-dark mb-3">
<div className="card-body text-dark">
<div className="album">
<h3>{posts.name}</h3>
<h3>{posts.email}</h3>
<Link to="./">Back To Home</Link>
</div>
</div>
</div>
</div>
);
}
This is album component that has a link
import React, {Component} from 'react'
import {Link} from "react-router-dom"
class Album extends Component{
render(){
return(
<div className="col-lg-6">
<div className="card border-dark mb-3">
<div className="card-body text-dark">
<div className="album">
<h3>{this.props.name}</h3>
<p>{this.props.email}</p>
<p>{this.props.body}</p>
<Link to={`/album/${this.props.view}`}>View</Link>
</div>
</div>
</div>
</div>
);
}
}
export default Album;
https://react-pin.netlify.com/
Please follow the above link to what I'm trying to do. Please first go to one "View Data From API"
My github link https://github.com/sultan0/reactpin

The route param is a string. There is no implicit type conversion
with === Operator. Therefore you have to do it explicitly. Pls. see
Comparison operators for a further explanation.
The spread ... Operator is misplaced here.
The solution is:
<ViewPosts posts={posts.find(pv => pv.id === parseInt(match.params.albumId))} />
Update
You would like to use the Switch component from react router:
Switch is unique in that it renders a route exclusively. In contrast, every Route that matches the location renders inclusively.
Pls refer to react router documentation.
I created a pull request as an example. Hope it helps.

React Redirect when clicking button

I´m learning in react and practicing making a simple application to login and view messages sent.
I´ve read a lot about routing, links and redirect, but i couldn´t translate to my app.
I Would like to click in the "Login" button of a component and redirect to another component.
Here i have the principal component : App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
class Login extends Component {
state = {
loggedIn:false
};
loginHandle = () => {
this.setState({loggedIn:true});
}
render(){
return (
<div className="container d-flex h-100">
<div className="row align-self-center w-100">
<div className="col-6 mx-auto">
<div className="jumbotron">
<form name="form1">
<fieldset>
<legend>Chat App</legend>
<label for="UserName" className="col-form-label">Username</label>
<input type="text" className="form-control col-12" id="UserName"></input>
<label for="Password" className="col-form-label">Password</label>
<input type="text" className="form-control col-12" id="Password"></input>
<button type="button" value="log in" className="btn btn-secondary" onClick={this.loginHandle}>Login</button>
</fieldset>
</form>
<div style={{float:"right"}}>
<div className="login-help ">
Register - Forgot Password
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Login;
I wrapped all the Links in a Navigation component
So, when i route /, it goes to the Login component
class Login extends Component {
state = {
loggedIn:false
};
loginHandle = () => {
this.setState({loggedIn:true});
}
render(){
return (
<div className="container d-flex h-100">
<div className="row align-self-center w-100">
<div className="col-6 mx-auto">
<div className="jumbotron">
<form name="form1">
<fieldset>
<legend>Chat App</legend>
<label for="UserName" className="col-form-label">Username</label>
<input type="text" className="form-control col-12" id="UserName"></input>
<label for="Password" className="col-form-label">Password</label>
<input type="text" className="form-control col-12" id="Password"></input>
<button type="button" value="log in" className="btn btn-secondary" onClick={this.loginHandle}>Login</button>
</fieldset>
</form>
<div style={{float:"right"}}>
<div className="login-help ">
Register - Forgot Password
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Login;
Do i have to import routes and redirect in the Login component, or i have to mange all from the App component?
Sorry about this mess, but i don´t know how to continue
Thanks a lot. I really apreciatted in advance.

The simplest way for navigating to another route.
For example you can wrap your Forgot password like following:
<Link to="/forgotRoute">Forgot password?</Link>
Don't forget to add /forgotRoute handling into your Navigator config (where you routed / to your Login component).
Hope it helps.

The correct way for what you want i think it is. So follow me..
You need to use router. In my case i'm using react-router-dom.
First router App component, by default page its renders DefaultPage components and in DefaultPage when component mounted you can render client anywhere.
index.js looks like:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Route, Switch } from 'react-router-dom';
class DefaultPage extends Component {
state = {
autorized: false,
mounted: false,
}
componentDidMount = () => {
const { autorized } = this.state;
if (!autorized) {
this.props.history.push('/login');
return;
}
this.setState({
mounted: true,
});
}
render = () => {
if (!this.state.mounted) {
return (
<React.Fragment>
<p>Waiting...</p>
</React.Fragment>
)
}
return (
<React.Fragment>
<p>Hello...</p>
</React.Fragment>
)
}
}
class Login extends React.Component {
handleLogin = () => {
if (contidion) {
this.props.history.push('/');
}
}
render = () {
return (
<button onClick={this.handleLogin}>Click to login</button>
)
}
}
class App extends React.Component {
render = () {
return (
<Switch>
<Route exact path="/" component={DefaultPage} />
<Route path="/login" component={Login} />
<Route component={DefaultPage} />
</Switch>
)
}
}
ReactDOM.render(
<BrowserRouter >
<App />
</BrowserRouter>,
document.getElementById("root")
);

Why does the twitter widget not re-render reactjs

I am using the twitter embedded timeline on my application to show the twitter feed of a companies twitter account.
When I get a result from an API, the state changes to the correct values, but the twitter widget does not appear to change
TwitterCard.js
import React from "react";
export class TwitterCard extends React.Component{
render() {
return (
<a className="twitter-timeline" href={this.props.href} data-height="100%">Tweets by {this.props.ticker}</a>
)
}
}
I have attached screenshots of the react plugin output for proof of state change.
The parent class is rather large, so I have posted the render method:
render() {
return (
<div>
<NavBar/>
<div className="container-fluid">
<div className="row">
<NavBarSide clickHandler={(url) => this.handleNavClick(url)}/>
<Dashboard
errorChart={this.state.errorChart}
twitter={this.state.twitter}
status={this.state.status}
/>
</div>
</div>
</div>
)
}
The parent passes these values to the Dashboard:
import React from "react";
import { Switch, Route } from 'react-router-dom';
import { Chart } from "./Chart";
import { TwitterCard } from "./TwitterCard";
export class Dashboard extends React.Component {
render() {
return (
<div className="col-md-9 ml-sm-auto col-lg-10 pt-2 px-3">
<div className="row">
<div className="col-lg-8">
<div className="row">
<div className="col-lg-6">
<div className="card border-0">
<div className="card-body">
<Chart chart={this.props.errorChart}/>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-4">
<TwitterCard href={this.props.twitter} ticker={this.props.ticker}/>
</div>
</div>
</div>
)
}
}

You can force an update to the twitter component when the ticket changes by keying it with the ticker where you render it in your dashboard component:
<TwitterCard
key={this.props.ticker}
href={this.props.twitter}
ticker={this.props.ticker}
/>