1
\$\begingroup\$

I've implemented the logic of my app, but I'm not sure whether it appropriate way or not.

Task: create a react app using redux, react-router v4 which has a page with a form for adding new post and list of postspage with form and list of posts

and a page with a detail view of one of the postsdetail view of post

I've added a unique id for each post with help of uuid and pass id of each post to the corresponding link(react-router-dom link) in the post list

      <Link to={props.id} className='post__header'>{props.title}</Link>

When link is clicked it passes id to the DetailView component. DetailView component takes id and seek the post with the same id in the whole state then render the post

import React from 'react';
import { connect } from 'react-redux';

let DetailView = (props) => {
  console.log(props);
  var currentPost = props.posts.find(post => post.id === props.match.params.id);

  return (
    <div>
      <h1>{currentPost.topic}</h1>
      <p>{currentPost.text}</p>
    </div>
  )
}

const mapStateToProps = (state) => {
  return state;
};

DetailView = connect(mapStateToProps)(DetailView);

export default DetailView;

Github link: https://github.com/LKTN/Branch/tree/dev

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.