0

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;

0 Answers0