We Keep Coding

Want to Re-render an other component in React JS

Actually I want another component to Re-render if some changes are made in some other component, parent of both component contain some other component that I don't want them to Re-render. just want when the function is executed it went back to parent and only Re-render the specific component. can't use Window.location.reload because it refresh all the items anything that can rerender only the triggered component. following code is just meant for the idea. as changes are done in First it must be reflected in the other component
`
{/* Parent Component*/}
class Parent extends React.Component {
constructor() {
super();
this.state = {
}
}
render() {
return (
<>
<SecondComponent />
<firstComponent />
<anotherComponent />
<anotherComponent />
<anotherComponent />
</>
);
}
}
export default Parent;
{/* 1 child component */}
import { React } from "react";
const FirstComponent = () => {
const handleChange=(event) =>{
const {name, value}=event.target
localStorage.setItem(name, value)
}
return (
<>
<div className="container-fluid">
<div className="row">
<div className="col-11 col-md-10 mx-auto">
<h1>All Searches</h1>
<input type='text' name='tab1' onChange={handleChange} />
<input type='text' name='tab2' onChange={handleChange} />
</div>
</div>
</div>
</>
);
}
export default FirstComponent;
{/* 2nd Child Component */}
import React from 'react';
import { NavLink } from 'react-router-dom'
class SecondComponent extends React.Component {
constructor(){
super();
this.state={
tab1:localStorage.getItem("tab1"),
tab2:localStorage.getItem("tab2"),
}
}
render() {
return (
<>
<div className="d-inline-flex" style={{ background: "#242F84", width: "100%" }}>
<NavLink to="/" className="Home">
<p className="mb-0 FS_28 px-2 White" >Home</p>
</NavLink>
<NavLink to="/AllSearches">
<p className="mb-0 White">All Searches</p>
</NavLink>
<NavLink to="/AllSearches">
<p className="mb-0 White">{this.state.tab1}</p>
</NavLink>
<NavLink to="/AllSearches">
<p className="mb-0 White">{this.state.tab2}</p>
</NavLink>
</div>
</>
);
}
}
export default SecondComponent;
`

To re-render a component the standard way is to change its state. The question is - If a component's state is not changed, why would you want to re-render it?
I see you are using local storage - I suggest you use local state as much as you can in stead of local storage to manage this type of information.

TypeError: _this.props.onUpdateShelf is not a function | React | Classbased component

I tried this.bind(this), but still get the same error. When I tried to move book from one to another shelf, this error occurred.
This is my code and in handleShelfChange (line-11) got the error saying:
onUpdateShelf is not a function.
import { Component } from 'react';
import React from 'react'
class Book extends Component {
state={
value: ''
};
handleShelfChange= event => {
const newValue=event.target.value;
this.setState({value:newValue},() =>{
this.props.onUpdateShelf(this.props.book,newValue)
});
}
render() {
const{book,title,UpdateShelf}=this.props;
return(
<li>
<div className="book">
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 193,
backgroundImage: 'url("http://books.google.com/books/content?id=PGR2AwAAQBAJ&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE73-GnPVEyb7MOCxDzOYF1PTQRuf6nCss9LMNOSWBpxBrz8Pm2_mFtWMMg_Y1dx92HT7cUoQBeSWjs3oEztBVhUeDFQX6-tWlWz1-feexS0mlJPjotcwFqAg6hBYDXuK_bkyHD-y&source=gbs_api")' }}></div>
<div className="book-shelf-changer">
<select
value={this.state.value}
onChange={this.handleShelfChange.bind(this)} >
<option value="move" disabled>Move to...</option>
<option value="currentlyReading">Currently Reading</option>
<option value="wantToRead">Want to Read</option>
<option value="read">Read</option>
<option value="none">None</option>
</select>
</div>
</div>
<div className="book-title">{book.title}</div>
<div className="book-authors">{book.authors}</div>
</div>
</li>
)
}
}
export default Book;
this is the parent component
import React from 'react'
import * as BooksAPI from './BooksAPI'
import './App.css'
import BookShelf from './BookShelf'
//import Book from './Book'
import SearchPage from './SearchPage'
import { Route } from 'react-router-dom'
import { Link } from 'react-router-dom'
class BooksApp extends React.Component {
state = {
readBooks:[]
}
componentDidMount() {
BooksAPI.getAll().then(books => {
this.setState({readBooks:books})
})
}
UpdateShelf = (book,shelf) => {
BooksAPI.update(book,shelf).then(books => {
book.shelf = shelf;
})
let updateBook = (book) =>{
this.setState(currState => ({
readBooks: currState.book.filter(b=>
b.id !== book.id
)
}));
}
}
render() {
const{book,onUpdateShelf}=this.props;
return (
<div className="app">
<Route exact path="/search"
render={() =>(
<SearchPage
book={book}
onUpdateShelf={onUpdateShelf} />
)}/>
<Route exact path="/"
render={() =>(
<div className="list-books">
<div className="list-books-title">
<h1>MyReads</h1>
</div>
<div className="list-books-content">
<BookShelf shelfType = "currentlyReading"
onUpdateShelf={onUpdateShelf}
book={this.state.readBooks.filter(b =>
b.shelf === "currentlyReading"
)} />
<BookShelf shelfType = "wantToRead"
onUpdateShelf={onUpdateShelf}
book={this.state.readBooks.filter(b =>
b.shelf === "wantToRead"
)} />
<BookShelf shelfType = "Read"
onUpdateShelf={onUpdateShelf}
book={this.state.readBooks.filter(b =>
b.shelf === "read"
)} />
</div>
<div className ="open-search">
<Link to="/search">
<button>Search Books</button>
</Link>
</div>
</div>
)} />
</div>
);
}
}
export default BooksApp;
also i attached the bookshelf component
import { Component } from 'react';
import React from 'react'
import Book from './Book'
class BookShelf extends Component {
render() {
const{onUpdateShelf,shelfType}=this.props;
return(
<div className="bookshelf">
<h2 className="bookshelf-title">{shelfType}</h2>
<div className="bookshelf-books">
<ol className="books-grid">
{this.props.book.map((book,key) =>
<Book
key={key}
book={book}
onUpdateShelf={onUpdateShelf} />
)}
</ol>
</div></div>
)
}
}
export default BookShelf;

you need to take one argument props to your class. then only you can access the values and functions in our class
class Book extends Component (props){
state={
change yor code like this

TypeError: this.props.dishes is undefined

I'm with trouble using props on React.
See my code:
This is my App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import { Navbar, NavbarBrand } from 'reactstrap';
import Menu from './components/MenuComponent';
import './App.css';
import { DISHES } from './shared/dishes';
class App extends Component {
constructor(props) {
super(props);
this.state = {
dishes: DISHES
};
}
render() {
return (
<div>
<Navbar dark color="primary">
<div className="container">
<NavbarBrand href="/">Ristorante Con Fusion</NavbarBrand>
</div>
</Navbar>
<Menu disches={this.state.disches}/>
</div>
);
}
}
export default App;
This is my MenuContent code:
import React, { Component } from 'react';
import { Media } from 'reactstrap';
class Menu extends Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
const menu = this.props.dishes.map((dish) =>{
return (
<div key={dish.id} className="col-12 mt-5">
<Media tag="li">
<Media left middle>
<Media object src={dish.image} alt={dish.name}/>
</Media>
<Media body className="ml-5">
<Media heading>{dish.name}</Media>
<p>{dish.description}</p>
</Media>
</Media>
</div>
);
});
return(
<div className="container">
<div className="row">
<Media list>
{menu}
</Media>
</div>
</div>
);
}
}
export default Menu;
And finally here the error:
TypeError: this.props.dishes is undefined
11 |
12 | render(){
13 |
> 14 | const menu = this.props.dishes.map((dish) =>{
15 | return (
16 | <div key={dish.id} className="col-12 mt-5">
<Media tag="li">
Before this I have used a local data and used this.state.dish and it works fine, but now I'm trying to get the data from another file and when I change the state for props, this error stuck me
Can somebody help please?

Unable to get concat value of object on page from redux store in React Js

I am not able to update my comment on the page.
After submiting it is showing comment object in the console log but not on the page Console log image
here is my comment.js
import {COMMENTS} from '../shared/comments';
import * as ActionType from './ActionTypes';
export const Comments=(state=COMMENTS ,action) => {
switch(action.type){
case ActionType.ADD_COMMENT:
var comment = action.payload;
comment.id = state.length;
comment.date = new Date().toISOString();
console.log("Comment: ", comment);
return state.concat(comment);
default:
return state;
};
}
here in my store
import {createStore, combineReducers} from 'redux';
import {Dishes} from './dishes';
import {Comments} from './comments';
import {Leaders} from './leaders';
import {Promotions} from './promotions';
export const ConfigureStore=() =>{
const store=createStore(
combineReducers({
dishes:Dishes,
comments:Comments,
leaders:Leaders,
promotions:Promotions
})
);
return store;
};
here is my action creator
import * as ActionTypes from './ActionTypes';
export const addComment=(dishID,rating,author,comment) => ({
type:ActionTypes.ADD_COMMENT,
payload:{
dishID:dishID,
rating:rating,
author:author,
comment:comment,
}
});
here is my App.js
import React from 'react';
import Main from './components/MainComponent';
import './App.css';
import {BrowserRouter} from 'react-router-dom';
import {Provider} from 'react-redux';
import {ConfigureStore} from './redux/configureStore';
const store=ConfigureStore();
class App extends React.Component {
render()
{
return (
<Provider store={store}>
<BrowserRouter>
<div>
<Main/>
</div>
</BrowserRouter>
</Provider>
);
}
}
export default App;
here is my MainComponent.js
import React from 'react';
import Menu from './MenuComponent';
import DishDetail from './DishdetailComponent';
import Home from './HomeComponent';
import Header from './HeaderComponent';
import Footer from './FooterComponent';
import Contact from './ContactComponent';
import About from './AboutComponent';
import {Switch , Route , Redirect,withRouter } from 'react-router-dom';
import {connect} from 'react-redux';
import {addComment} from '../redux/ActionCreators'
const mapStateToProps=state =>{
return{
dishes:state.dishes,
leaders:state.leaders,
comments:state.comments,
promotions:state.promotions
}
};
const mapDispatchToProps = dispatch => ({
addComment:(dishId,rating,author,comment) => dispatch(addComment(dishId,rating,author,comment))
});
class Main extends React.Component {
render()
{
const HomePage=() => {
return(<Home dish={this.props.dishes.filter((dish) => dish.featured)[0]}
leader={this.props.leaders.filter((leader) => leader.featured)[0]}
promotion={this.props.promotions.filter((promo) => promo.featured)[0]} />);
}
const DishWithId=({match}) => {
return(
<DishDetail dish={this.props.dishes.filter((dish) => dish.id === parseInt(match.params.dishId,10))[0]}
comments={this.props.comments.filter(comment => comment.dishId === parseInt(match.params.dishId,10))}
addComment={this.props.addComment} />
);
};
return (
<div>
<Header/>
<Switch>
<Route path="/home" component={HomePage}/>
<Route exact path="/aboutus" component={() => <About leaders={this.props.leaders}/>}/>
<Route exact path="/menu" component={() => <Menu dishes={this.props.dishes}/>} />
<Route path="/menu/:dishId" component={DishWithId} />
<Route exact path="/contactus" component={() => <Contact/>}/>
<Redirect to="/home"/>
</Switch>
<Footer/>
</div>
);
}
}
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(Main));
here is my dishdetail.js component
import React from 'react';
import '../App.css';
import { Card, CardImg, CardBody, CardTitle, CardText ,Breadcrumb ,BreadcrumbItem ,Button, Modal, ModalHeader, ModalBody, Label,Row} from 'reactstrap';
import { LocalForm, Control,Errors } from 'react-redux-form';
import {Link} from 'react-router-dom';
const maxLength=(len) => (val) => !(val) || (val.length <= len);
const minLength=(len) => (val) => (val) && (val.length >= len);
class CommentForm extends React.Component
{
constructor(props)
{
super(props);
this.state={
isModalOpen:false
};
this.toggleModal=this.toggleModal.bind(this);
this.handelSubmit=this.handelSubmit.bind(this);
}
toggleModal()
{
this.setState({
isModalOpen: !this.state.isModalOpen
});
}
handelSubmit(values)
{
this.props.addComment(this.props.dishId,values.rating,values.author,values.comment);
this.toggleModal();
}
render(){
return(
<React.Fragment>
<Button outline onClick={this.toggleModal}><span className="fa fa-pencil"></span>{' '}Submit Comment</Button>
{/*--Modal For Comment--*/}
<Modal id="commentModal" isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>Submit Comment</ModalHeader>
<ModalBody>
<LocalForm onSubmit={(values) => this.handelSubmit(values)} >
<Row className="form-row mt-2">
<Label htmlFor="rating">Rating</Label>
<Control.select model=".rating"
id="rating"
name="rating"
className="form-control"
>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Control.select>
</Row>
<Row className="form-row mt-2">
<Label htmlFor="author">Your Name</Label>
<Control.text model=".author"
id="author"
name="author"
className="form-control"
placeholder="Your Name"
validators={{
minLength:minLength(3),
maxLength:maxLength(15)
}}
/>
<Errors
className="text-danger"
model=".author"
show="touched"
messages={{
minLength:'Must be greater than 2 characters',
maxLength:'Must be 15 characters or less'
}}/>
</Row>
<Row className="form-row mt-2">
<Label htmlFor="comment">Comment</Label>
<Control.textarea model=".comment"
rows="6"
id="comment"
name="comment"
className="form-control"
/>
</Row>
<Row className="form-row mt-2">
<Button type="submit" color="primary" >Submit</Button>
</Row>
</LocalForm>
</ModalBody>
</Modal>
</React.Fragment>
);
}
}
function RenderDish({dish})
{
return(
<div className="col-12 col-md-5 m-1">
<Card>
<CardImg width="100%" src={dish.image} alt={dish.name} />
<CardBody>
<CardTitle><strong>{dish.name}</strong></CardTitle>
<CardText>{dish.description}</CardText>
</CardBody>
</Card>
</div>
);
}
function RenderComments({comments,dishId,addComment})
{
if(comments!=null)
{
return(
<div className="col-12 col-md-5 m-1">
<h4>comments</h4>
<ul className="list-unstyled">
{comments.map(comment => {
return(
<li key={comment.id}>
<p>{comment.comment}</p>
<p>--{comment.author} ,{new Intl.DateTimeFormat('en-US',{year:'numeric',month:'short',day:'2-digit'}).format(new Date(Date.parse(comment.date)))}</p>
</li>
);
})}
</ul>
<CommentForm dishId={dishId} addComment={addComment}/>
</div>
);
}
else{
return <div></div>
}
}
function DishDetail(props)
{
if(props.dish!=null)
{
return(
<div className="container">
<div className="row">
<Breadcrumb >
<BreadcrumbItem><Link to="/home">Home</Link></BreadcrumbItem>
<BreadcrumbItem><Link to="/menu">Menu</Link></BreadcrumbItem>
<BreadcrumbItem>{props.dish.name}</BreadcrumbItem>
</Breadcrumb>
<div className="col-12">
<h3>{props.dish.name}</h3>
<hr/>
</div>
</div>
<div className="row">
<RenderDish dish={props.dish}/>
<RenderComments comments={props.comments} dishId={props.dish.id} addComment={props.addComment}/>
</div>
</div>
);
}
else
{
return(
<div></div>
);
}
}
export default DishDetail;
please help !!

ReactJS- render modal component on onclick event

I am trying to add ReactStrap Modal to my NavBar but couldn't find solution to it. I created a handler function which will be called upon click event but I am not able to call my login component on this handler function. I also bind the handler to the current DOM. What i have done is simply called Login component which is not working. Please explain how can I call component form this parent component
Code:
login.js
import React from 'react';
import {
Button,
Form,
FormGroup,
// FormText,
Label,
Input,
Modal,
ModalHeader,
ModalBody,
ModalFooter
} from 'reactstrap';
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
return (
<div>
<Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>Login</ModalHeader>
<ModalBody>
<Form>
<FormGroup>
<Label for="Email">Email</Label>
<Input type="email" name="email" id="email" placeholder=""/>
</FormGroup>
<FormGroup>
<Label for="password">Password</Label>
<Input type="password" name="password" id="password" placeholder=""/>
</FormGroup>
</Form>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>Submit</Button>{' '}
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default Login;
NavBar.js:
import React from 'react';
import Login from './login/login';
import {
Navbar,
NavbarBrand,
NavbarToggler,
Nav,
NavItem,
NavLink,
Collapse,
UncontrolledDropdown,
DropdownMenu,
DropdownItem,
DropdownToggle
} from 'reactstrap';
class NavbarComponent extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
};
this.handleClick = this.handleClick.bind(this);
**this.setState={
isloggedOn: true
}**
}
stickyNavbar() {
var Navbar = document.getElementById("Navbar");
console.log(Navbar);
var sticky = Navbar.offsetTop;
if (window.pageYOffset >= sticky) {
Navbar.classList.add("sticky")
} else {
Navbar.classList.remove("sticky");
}
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
handleClick() {
**if(this.isloggedOn) {
return <Login/>;
}**
}
render() {
return (
<div>
<Navbar color="dark" light expand="md">
<NavbarBrand href="/">found-Missing</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<DropdownMenu right>
<DropdownItem onClick= {this.handleClick}>
Login
</DropdownItem>
<DropdownItem href="https://github.com/reactstrap/reactstrap">
Signup
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
</DropdownMenu>
</Navbar>
</div>
)
}
}
export default NavbarComponent;

If you are wanting to trigger the modal from within NavBar, simply add a prop to <NavBar /> that toggles modal within the state of login.js.

There are a few things wrong with your code.
The isLoggedOn in your NavBarComponent should reside in the state. You have put it in setState.
Your handleClick method is returning a react component. This is not right. It should just take care of toggling the state.
As others have said, you need to use conditional rendering.
With all these changes, your NavBarComponent should look like this:
import React from 'react';
import Login from './login/login';
import {
Navbar,
NavbarBrand,
NavbarToggler,
Nav,
NavItem,
NavLink,
Collapse,
UncontrolledDropdown,
DropdownMenu,
DropdownItem,
DropdownToggle
} from 'reactstrap';
class NavbarComponent extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false,
isLoggedOn: false
};
this.handleClick = this.handleClick.bind(this);
}
stickyNavbar() {
var Navbar = document.getElementById("Navbar");
console.log(Navbar);
var sticky = Navbar.offsetTop;
if (window.pageYOffset >= sticky) {
Navbar.classList.add("sticky")
} else {
Navbar.classList.remove("sticky");
}
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
handleClick() {
this.setState({ isLoggedOn: true })
}
render() {
return (
<div>
<Navbar color="dark" light expand="md">
<NavbarBrand href="/">found-Missing</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
{this.state.isLoggedOn ? <div>User successfully logged in!!</div> : (
<DropdownMenu right>
<DropdownItem onClick= {this.handleClick}>
Login
</DropdownItem>
<DropdownItem href="https://github.com/reactstrap/reactstrap">
Signup
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
</DropdownMenu>
)}
</Navbar>
</div>
)
}
}
export default NavbarComponent;

Alright I have solved the issue.
I created a state in my component and passed that state to my component along with the method(which changes the current state on onclick event) from which component can access it from parent component.
Once the component renders modal, it will call loginmodals method of parent component and change the current state and return the current state to parent component.
Now current state is false, again Parent component will call login component with new state i.e. false on which Modal will look at the state which is false, so it will close the Modal.
Login.js:
import React from 'react';
import {
Button,
Form,
FormGroup,
Label,
Input,
Modal,
ModalHeader,
ModalBody,
ModalFooter
} from 'reactstrap';
class Login extends React.Component {
constructor(props) {
console.log(props);
super(props);
}
render() {
return (
<div onClick={this.props.loginmodals}>
{/* <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button> */}
<Modal isOpen={this.props.loginmodal} toggle={this.props.loginmodals} className={this.props.className}>
<ModalHeader toggle={this.props.loginmodals}>Login</ModalHeader>
<ModalBody>
<Form>
<FormGroup>
<Label for="Email">Email</Label>
<Input type="email" name="email" id="email" placeholder=""/>
</FormGroup>
<FormGroup>
<Label for="password">Password</Label>
<Input type="password" name="password" id="password" placeholder=""/>
</FormGroup>
</Form>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>Submit</Button>{' '}
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default Login;
Navbar.js:
import React from 'react';
import Login from './login/login';
import {
Navbar,
NavbarBrand,
NavbarToggler,
Nav,
NavItem,
NavLink,
Collapse,
UncontrolledDropdown,
DropdownMenu,
DropdownItem,
DropdownToggle
} from 'reactstrap';
class NavbarComponent extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false,
loginmodal: false,
signupmodal: false
};
this.loginmodals = this.loginmodals.bind(this);
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
loginmodals(state) {
this.setState({
loginmodal: !this.state.loginmodal,
});
}
render() {
return (
<div>
<Navbar color="" light expand="md">
<NavbarBrand href="/">found-Missing</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/components/">About us</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">How it Works</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
login/signup
</DropdownToggle>
<DropdownMenu right>
**<DropdownItem onClick={this.loginmodals}>
Login
<Login loginmodal={this.state.loginmodal} loginmodals={this.loginmodals}/>
</DropdownItem>**
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
</div>
)
}
}
export default NavbarComponent;