How to pass nextProps to child component - reactjs

Question

I'm trying to pass the updated like count to the child component PostList.js.
it is called like
myLikes={post.Likes.length} // right here
The console.log(nextProps.myPosts)
makes a new likes object array, with the updated Likes count. How would i reflex this update to the UI ?
myLikes={post.Likes.length} gets Likes count, but does not get the updated nextProps.
Posts.js
import React, { Component } from 'react';
import PostList from './PostList';
import {connect} from 'react-redux';
import { withRouter, Redirect} from 'react-router-dom';
import {GetPosts} from '../actions/';
const Styles = {
myPaper:{
margin: '20px 0px',
padding:'20px'
}
,
wrapper:{
padding:'0px 60px'
}
}
class Posts extends Component {
state = {
posts: [],
loading: true,
isEditing: false,
// likes:[]
}
componentWillMount(){
this.props.GetPosts();
this.setState({
loading:false
})
}
componentWillReceiveProps(nextProps, prevState) {
let hasNewLike = true ;
if(prevState.posts && prevState.posts.length) {
for(let index=0; index < nextProps.myPosts.length; index++) {
if(nextProps.myPosts[index].Likes.length !==
prevState.posts[index].Likes.length) {
hasNewLike = true;
}
}
}
if(hasNewLike) {
this.setState({posts: nextProps.myPosts}); // here we are updating the posts state if redux state has updated value of likes
}
console.log(nextProps.myPosts)
// console.log(nextProps.myPosts[1].Likes.length) // shows a like count
}
render() {
const {loading} = this.state;
const { myPosts} = this.props
if (!this.props.isAuthenticated) {
return (<Redirect to='/signIn' />);
}
if(loading){
return "loading..."
}
return (
<div className="App" style={Styles.wrapper}>
<h1> Posts </h1>
<PostList posts={this.state.posts}/>
</div>
);
}
}
const mapStateToProps = (state) => ({
isAuthenticated: state.user.isAuthenticated,
myPosts: state.post.posts,
})
const mapDispatchToProps = (dispatch, state) => ({
GetPosts: () => dispatch( GetPosts())
});
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(Posts));
PostList.js
import React, { Component } from 'react';
import Paper from '#material-ui/core/Paper';
import Button from '#material-ui/core/Button';
import Typography from '#material-ui/core/Typography';
import moment from 'moment';
import {connect} from 'react-redux';
import {DeletePost, postLike, UpdatePost,EditChange, getCount, DisableButton} from '../actions/';
import PostItem from './PostItem';
import _ from 'lodash';
const Styles = {
myPaper: {
margin: '20px 0px',
padding: '20px'
}
}
class PostList extends Component{
constructor(props){
super(props);
this.state ={
title: '',
}
}
// Return a new function. Otherwise the DeletePost action will be dispatch each
// time the Component rerenders.
removePost = (id) => () => {
this.props.DeletePost(id);
}
onChange = (e) => {
e.preventDefault();
this.setState({
title: e.target.value
})
}
formEditing = (id) => ()=> {;
this.props.EditChange(id);
}
render(){
const {posts} = this.props;
// console.log(this.props.ourLikes);
return (
<div>
{posts.map(post => (
<Paper key={post.id} style={Styles.myPaper}>
<PostItem
myLikes={post.Likes.length} // right here
myTitle={this.state.title}
editChange={this.onChange}
editForm={this.formEditing}
isEditing={this.props.isEditingId === post.id}
removePost={this.removePost}
{...post}
/>
</Paper>
))}
</div>
);
}
}
const mapStateToProps = (state) => ({
isEditingId: state.post.isEditingId,
})
const mapDispatchToProps = (dispatch) => ({
// pass creds which can be called anything, but i just call it credentials but it should be called something more
// specific.
EditChange: (id) => dispatch(EditChange(id)),
UpdatePost: (creds) => dispatch(UpdatePost(creds)),
postLike: (id) => dispatch( postLike(id)),
// Pass id to the DeletePost functions.
DeletePost: (id) => dispatch(DeletePost(id))
});
export default connect(mapStateToProps, mapDispatchToProps)(PostList);
Navbar.js
import React from 'react';
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
import signUp from '../auth/signUp';
import signIn from '../auth/signIn';
import Post from '../Post';
import Forgot from '../account/Forgot';
import Home from '../Home';
import Posts from '../Posts';
import Users from '../account/Users';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import Typography from '#material-ui/core/Typography';
import Button from '#material-ui/core/Button';
import {withStyles} from '#material-ui/core';
import Dashboard from '../account/dashBoard';
import {connect} from 'react-redux';
import {createBrowserHistory} from 'history';
import PropTypes from 'prop-types';
import {compose} from 'redux';
import Axios from '../../Axios';
import updatePassword from '../account/updatePassword';
import ResetPassword from '../account/ResetPassword';
import ourStyles from '../../styles/ourStyles';
export const history = createBrowserHistory({forceRefresh: true});
const logout = (e) => {
e.preventDefault()
Axios.get(process.env.REACT_APP_LOGOUT, {withCredentials: true})
.then(res => {
// console.log(res);
if (res.status === 200) {
localStorage.removeItem('auth')
localStorage.removeItem('myAuth')
history.push('/')
}
})
.catch(err => {
// // their will be an inevitable error, so you would need this for it to work
localStorage.removeItem('auth')
localStorage.removeItem('myAuth')
history.push('/')
})
}
const Navbar = ({classes, isAuthenticated}) => (
<Router history={history}>
<div className={classes.navRoot}>
<AppBar position="static" className={classes.navbar}>
<Toolbar>
<Typography variant="h6" color="inherit">
Express Seqeuelize App
</Typography>
<Typography classcolor="inherit" className={classes.rightt}>
{!isAuthenticated && (
<Button>
<Link to="/" className={classes.rightToolbar}>
Home
</Link>
</Button>
)}
{isAuthenticated && (
<Button>
<Link className={classes.rightToolbar} to="/posts">
Posts
</Link>
</Button>
)}
{!isAuthenticated && (
<Button>
<Link to="/signUp" className={classes.rightToolbar}>
Sign Up
</Link>
</Button>
)}
{!isAuthenticated && (
<Button>
<Link to="/signIn" className={classes.rightToolbar}>
Sign In
</Link>
</Button>
)}
{isAuthenticated && (
<Button>
<Link className={classes.rightToolbar} to="/Post">
New Post
</Link>
</Button>
)}
{isAuthenticated && (
<Button>
<Link to="/dashboard" className={classes.rightToolbar}>
Dashboard
</Link>
</Button>
)}
{isAuthenticated && (
<Button onClick={logout}>
LogOut
</Button>
)}
</Typography>
</Toolbar>
</AppBar>
<Switch>
<Route exact path="/signUp" component={signUp}/>
<Route exact path="/" component={Home}/>
<Route exact path="/signIn" component={signIn}/>
<Route exact path="/Post" component={Post}/>
<Route exact path="/Posts" component={Posts}/>
<Route path="/Forgot" component={Forgot}/>
<Route path="/users" component={Users}/>
<Route exact path="/logout"/>
<Route exact path="/dashboard" component={Dashboard}/>
<Route path="/test"/>
<Route path="/reset/:token" component={ResetPassword}/>
<Route exact path="/updatePassword/:username" component={updatePassword}/>
</Switch>
</div>
</Router>
);
const mapStateToProps = (state) => ({
token: state.user.getToken, githubAuth: state.user.githubAuth,
// owl: state.user.owl,
isAuthenticated: state.user.isAuthenticated
})
const mapDispatchToProps = (dispatch) => ({
// logIn: (user) => dispatch(logIn(user))
});
Navbar.propTypes = {
isAuthenticatd: PropTypes.string
}
// export default withStyles(styles)(Navbar);
export default compose(connect(mapStateToProps, mapDispatchToProps), withStyles(ourStyles))(Navbar);
Reducer
const initialState = {
post: [],
postError: null,
posts:[],
isEditing:false,
isEditingId:null,
likes:[],
someLike:[],
postId:null
}
export default (state = initialState, action) => {
switch (action.type) {
case ADD_LIKE:
const newState = {...state}; // here I am trying to shallow copy the existing state;
const existingLikesOfPost = newState.posts.find(post => post.id == action.id).Likes;
newState.posts.find(post => post.id == action.id).Likes = [...existingLikesOfPost, action.newLikeObject];
console.log(newState)
return newState
console.log(newState)
{
"post": [],
"postError": null,
"posts": [
{
"id": 5,
"title": "React estiossssnsdd",
"post_content": "ssss",
"username": "owlman",
"createdAt": "2019-04-26T09:38:10.324Z",
"updatedAt": "2019-04-27T20:53:16.898Z",
"userId": 1,
"Likes": [
{
"id": 236,
"like": true,
"createdAt": "2019-04-27T20:57:44.395Z",
"updatedAt": "2019-04-27T20:57:44.395Z",
"userId": 1,
"postId": 5
},
{
"id": 220,
"like": true,
"createdAt": "2019-04-27T15:57:29.753Z",
"updatedAt": "2019-04-27T15:57:29.753Z",
"userId": 1,
"postId": 5
},
"isEditing": false,
"isEditingId": null,
"likes": [
117,
39
],
"someLike": [],
"postId": null
}

Answer 1

Post.js
componentWillReceiveProps(nextProps, prevState) {
let hasNewLike = true ;
if(prevState.posts && prevState.posts.length) {
for(let index=0; index < nextProps.myPosts.length; index++) {
if(nextProps.myPosts[index].Likes.length !==
prevState.posts[index].Likes.length) {
hasNewLike = true;
}
}
}
if(hasNewLike) {
this.setState({posts: nextProps.myPosts}); // here we are updating the posts state
if redux state has updated value of likes
}
console.log(nextProps.myPosts)
return true // return your change --- this can be a reason of not re-rendering
// console.log(nextProps.myPosts[1].Likes.length) // shows a like count
}

Answer 2

So it appears, that moving the PostList Component logic all to Posts.js seems to do the desired action. However it would be nice to keep the logic separated, but this logic will be good for now.
So componentWillReceiveProps needs to be on the component in which you want to make the update on. In this case i wanted to make the update on
post.Likes.length
which was on the PostList.js component. However, the componentWillReceiveProps is on the posts.js component. So i moved the logic on the Posts.js component.
Posts.js
import React, {Component} from 'react';
import PostList from './PostList';
import Paper from '#material-ui/core/Paper';
import {connect} from 'react-redux';
import {withRouter, Redirect} from 'react-router-dom';
import {
DeletePost,
postLike,
UpdatePost,
EditChange,
getCount,
DisableButton
} from '../actions/';
import PostItem from './PostItem';
import {GetPosts} from '../actions/';
const Styles = {
myPaper: {
margin: '20px 0px',
padding: '20px'
},
wrapper: {
padding: '0px 60px'
}
}
class Posts extends Component {
state = {
posts: [],
title: '',
loading: true,
isEditing: false,
}
componentWillMount() {
this.props.GetPosts();
}
removePost = (id) => () => {
this.props.DeletePost(id);
}
onChange = (e) => {
e.preventDefault();
this.setState({title: e.target.value})
}
formEditing = (id) => () => {
this.props.EditChange(id);
}
componentWillReceiveProps(nextProps, prevState) {
let hasNewLike = true;
if (prevState.posts && prevState.posts.length) {
for (let index = 0; index < nextProps.myPosts.length; index++) {
if (nextProps.myPosts[index].Likes.length !== prevState.posts[index].Likes.length) {
hasNewLike = true;
}
}
}
if (hasNewLike) {
this.setState({posts: nextProps.myPosts, loading: false}); // here we are updating the posts state if redux state has updated value of likes
}
}
render() {
const {loading} = this.state;
const {myPosts} = this.props
console.log(this.state.posts);
if (!this.props.isAuthenticated) {
return (<Redirect to='/signIn'/>);
}
if (loading) {
return "loading..."
}
return (
<div className="App" style={Styles.wrapper}>
<h1>Posts</h1>
{/* <PostList posts={this.state.posts}/> */}
<div>
{this.state.posts.map(post => (
<Paper key={post.id} style={Styles.myPaper}>
<PostItem myLikes={post.Likes.length} // right here
myTitle={this.state.title} editChange={this.onChange} editForm={this.formEditing} isEditing={this.props.isEditingId === post.id} removePost={this.removePost} {...post}/>
</Paper>
))}
</div>
</div>
);
}
}
const mapStateToProps = (state) => ({
isAuthenticated: state.user.isAuthenticated,
myPosts: state.post.posts, isEditingId:
state.post.isEditingId
})
const mapDispatchToProps = (dispatch, state) => ({
GetPosts: () => dispatch(GetPosts()),
// specific.
EditChange: (id) => dispatch(EditChange(id)),
UpdatePost: (creds) => dispatch(UpdatePost(creds)),
postLike: (id) => dispatch(postLike(id)),
// Pass id to the DeletePost functions.
DeletePost: (id) => dispatch(DeletePost(id))
});
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Posts));