We Keep Coding

React Link To not updating the component

I am using React with Redux to list number of items and inside the item I have a list of similar items
In Home Page (there is a list of items when you click on any of them , it goes to the item path ) which is working well , but inside the item page , when you click on any items from similar items list (the view not updating )
the codeSandobx is here
App.js
const store = createStore(ItemsReducer, applyMiddleware(...middlewares));
class App extends React.Component {
render() {
return (
<Provider store={store}>
<Main />
</Provider>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
main.js
const Main = () => {
return (
<Router>
<div>
<Header />
<div className="container-fluid">
<Switch>
<Route exact path="/" component={Home} />
<Route path="/item/:id" component={Item} />
</Switch>
</div>
</div>
</Router>
);
};
export default Main;
Home.js
class Home extends React.Component {
render() {
const itemsList = this.props.items.map(item => {
return <ItemList item={item} key={item.id} />;
});
return <div className="items-list"> {itemsList}</div>;
}
}
const mapStateToProps = state => ({
items: state.items,
user: state.user
});
export default connect(mapStateToProps, null, null, {
pure: false
})(Home);
Item.js
class Item extends React.Component {
constructor(props) {
super();
this.state = {
item_id: props.match.params.id,
};
}
render() {
const itemsList = this.props.items.map(item => {
return <ItemList item={item} key={item.id} />;
});
return (
<div id="item-container">
<div className="item-list fav-items"> {itemsList} </div>;
</div>
);
}
}
const mapStateToProps = state => ({
items: state.items,
user: state.user
});
export default connect(mapStateToProps, null, null, {
pure: false
})(Item);
and finally the ItemList.js
class ItemList extends React.Component {
render() {
const item = this.props.item;
const item_link = "/item/" + item.id;
return (
<Link to={item_link}>
<div className="item-li">
{item.title}
</div>
</Link>
);
}
}
export default ItemList;
I've tired to use this solution from react-redux docs , but it didn't work

What do you expect to update on link click?
Any path /item/:id (with any id: 2423, 2435, 5465) will show the same result, because you don't use params.id inside the Item component
UPDATED
When id changes the component doesn't remount, only updates component (It's correct behavior)
If you want to fetchData on each changes of id, the next solution has to work for you
on hooks:
const Item = () => {
const params = useParams();
useEffect(() => {
axios.get(`/item/${params.id}`).then(...)
}, [params.id]);
return (
...
)
}
useEffect will call fetch each time when id is changing
and in class component you have to use componentDidUpdate:
class Item extends Component {
componentDidMount() {
this.fetchData();
}
componentDidUpdate(prevProps) {
if (prevProps.match.params.id !== this.props.match.params.id) {
this.fetchData();
}
}
fetchData = () => {
...
}
...
}

Passing picture from one component to another in React

I have a product component which I wish to pass its picture to another component, my picture is uploaded from Rails backend, and the product details are mapped. What I want to achieve is when you click on the button then your product picture will display in the design page to be custom design.
import axios from 'axios';
import CardDeck from 'react-bootstrap/CardDeck';
import Card from 'react-bootstrap/Card';
import {Link} from 'react-router-dom';
import Display from './Display';
const SERVER_URL = "http://localhost:3000/products/index";
const IMAGE_URL = "http://localhost:3000/";
class Product extends Component {
constructor(props) {
super(props);
console.log(props);
this.state = {
products: [],
name: '',
material: ''
}
}
fetchProducts () {
axios.get(SERVER_URL).then((res) => {
//console.log(res.data);
const allProducts = res.data;
//this.setState({product: []});
this.setState({products: res.data});
this.setState({material: res.data.id});
// const aProduct = [...new Set(allProducts.map(pro => pro.name))]
// console.log(aProduct);
})
}
componentDidMount(){
this.fetchProducts();
}
_handleClick = event => {
event.preventDefault();
axios.get(SERVER_URL,{
//product:{name: this.state.name, category: this.state.category}
}).then(res =>{
this.setState({
})
}).catch(error => {console.log(error);
});
}
render() {
return (
<div className="productGrid">
{this.state.products.map((product, index) => (
// <p>Name: {product.name} <p>Price:{product.price}</p> <p>Category:{product.category}</p>
// <p> Fixing Method:{product.fixing_method}</p> <p>Material:{product.material}</p>
// <p>Height:{product.height}</p>
<CardDeck>
<Card>
<Card.Img variant="top" src={IMAGE_URL + product.img_tag} />
<Card.Body>
<Card.Title>Name: {product.name}</Card.Title>
<Card.Text>Category: {product.category}</Card.Text>
<Card.Text>Price: ${product.price}</Card.Text>
<Card.Text>Material: {product.material}</Card.Text>
<Card.Text>Fixin Method: {product.fixing_method}</Card.Text>
<Card.Text>Shape: {product.shape}</Card.Text>
<Card.Text>Height: {product.height}</Card.Text>
<Card.Text>Width: {product.width}</Card.Text>
<Link to={"/DesignPage/" + product.id}><button >Design Me</button></Link>
</Card.Body>
</Card>
</CardDeck>
))}
<Display image={IMAGE_URL + product.img_tag}/>
</div>
);
}
}
export default Product;
Design Page
When you click on design me button then based on the product the picture of that product should appear in design page
import React, { Component } from 'react';
import SideBar from './SideBar';
import Nav from './Nav'
import Display from './Display';
class DesignPage extends Component {
constructor(props) {
super(props);
// console.log(props.match.params.design);
this.state = { }
}
render() {
return (
<div><Nav/>
<div className="container py-4">
<div className="row">
<div className="col-lg-5">
<SideBar/>
</div>
<div className="col-lg-6">
{/* <Display design={this.props.match.params.design}/> */}
<Display/>
</div>
</div>
</div>
</div>
);
}
}
export default DesignPage;
Display
import React from 'react';
import Product from './Product';
const Display = (props) => {
console.log(props.design);
return(
<div className="card card-content">
<div className="container-lg">
<div>{props.design}</div>
</div>
</div>
)
}
export default Display;

Access like props.image instead of props.design as i can see you are assigning your concatenating url to image in Product component.
const Display = (props) => {
console.log(props.image);
return(
<div className="card card-content">
<div className="container-lg">
<div>{props.image}</div>
</div>
</div>
)
}

React js : import component to route

I have class like this in reactjs
class Topics extends React.Component {
constructor(props){
super(props);
this.state ={
url:props.match.url,
path:props.match.path
}
}
render(){
return (<div>
<h2>Topic</h2>
<ul>
{topics.map(({ name, id }) => (
<li key={id}>
<Link to={`${this.state.url}/${id}`}>{name}</Link>
</li>
))}
</ul>
<Route path={`${this.state.path}/:topicId`} component={TopicDetails}/>
</div>)
}
}
I am trying to load TopicDetails component in a route.The TopicDetails
topicDetails.js
const TopicDetails = ({match}) => {
const topic = topics.find(({ id }) => id === match.params.topicId);
return (<div>
<h2>Details</h2>
<h2>{topic.name}</h2>
<p>{topic.description}</p>
</div>
)
}
export default TopicDetails;
My question is how can properly add the component which is imported??

Since you are exporting TopicDetails as default export you can import it like
import TopicDetails from './TopicDetails'; //here specify the correct path of TopicDetails functional component
Complete code is here
import TopicDetails from './TopicDetails';
class Topics extends React.Component {
constructor(props){
super(props);
this.state ={
url:props.match.url,
path:props.match.path
}
}
render(){
return (<div>
<h2>Topic</h2>
<ul>
{topics.map(({ name, id }) => (
<li key={id}>
<Link to={`${this.state.url}/${id}`}>{name}</Link>
</li>
))}
</ul>
<Route path={`${this.state.path}/:topicId`} component={TopicDetails}/>
</div>)
}
}

How to toggle class for the only one element on click in react

I am trying to make a flipped set of cards in React. You can see my code below. When I click on the card, they all flipped, but my goal is to flip only those that i clicked on. How can I do this?
This is my card component:
import React from 'react';
export default class Card extends React.Component {
render() {
let className = this.props.condition ? 'card-component flipped' : 'card-component';
return (
<div onClick={this.props.handleClick} className={className}>
<div className="front">
<img src={this.props.image} alt="card"/>
</div>
<div className="back">
</div>
</div>);
}
}
Here is my Deck component:
import React from 'react';
import Card from './Card.js';
const cardlist = require('../cardlist').cardlist;
export default class Deck extends React.Component{
constructor(props) {
super(props);
this.state = {flipped: false};
}
handleClick() {
this.setState({flipped: !this.state.flipped});
}
render() {
const list = this.props.cards.map((card, index) => {
return <Card
key={index}
handleClick={this.handleClick.bind(this)}
condition={this.state.flipped}
image={cardlist[card].path}
/>});
return(
<ul>
{list}
</ul>)
}
};
Thank you!

You can make use of indexes.
export default class Deck extends React.Component{
constructor(props) {
super(props);
//flipped true nonflipped false
this.state = {
flipStatus : props.cards.map((element) => false)
}
handleClick(index) {
const newflipStatus = [...this.state.flipStatus]
newflipStatus[index] = !this.state.flipStatus[index]
this.setState({flipStatus: newflipStatus);
}
render() {
const list = this.props.cards.map((card, index) => {
return <Card
key={index}
handleClick={this.handleClick.bind(this)}
condition={this.state.flipped}
index={index}
image={cardlist[card].path}
flipped=this.state.flipStatus[index]
/>});
return(
<ul>
{list}
</ul>)
}
};
here is your card component
export default class Card extends React.Component {
render() {
let className = this.props.condition ? 'card-component flipped' : 'card-component';
return (
<div onClick={() => this.props.handleClick(this.props.index)} className={className}>
{!flipped && <div className="front">
<img src={this.props.image} alt="card"/>
</div>}
{flipped && <div className="back">
</div>}
</div>);
}
}

in the handleClick function you are setting the "flipped" state variable for the whole deck not for a single card, that's why the whole deck changes together.
the solution would be simple to have a state for each card to designate if it's flipped or not, rather than making the variable on the parent level

How to update a parent's component state from a child component in Reactjs

I am passing the state of the parent component from the parent component to the child component.And in the child component,I have a different state.I am performing some actions on the child component's state and the result of that has to be added to the parent component's state.So,in my parent component I have written a callback function which will update the state of the parent component.The code is:
updateState = (booksList) => {
this.setState({books : this.state.books.push(booksList)});
}
So,this function is then passed to the child component as props:
<BookSearch
books={this.state.books}
handleShelfChange={this.handleShelfChange}
updateState={this.updateState}/>
Then in my child component,I am trying to implement the callback function as :
let getBook = this.state.books.filter(filteredBook => filteredBook.shelf !== "none")
this.props.updateState(getBook)
But this is not working as expected.Is this the correct way?Can anyone please help me with this?
I have tried to solve my problem by implementing the solution provided here : How to pass data from child component to its parent in ReactJS? , but I am getting some errors.
EDIT
Parent component : App.js
import React from 'react'
import * as BooksAPI from './BooksAPI'
import { Link } from 'react-router-dom'
import { Route } from 'react-router-dom'
import './App.css'
import BookList from './BookList'
import BookSearch from './BookSearch'
class BooksApp extends React.Component {
constructor(props) {
super(props);
this.state = {
books: [],
showSearchPage : false
};
//this.updateState = this.updateState.bind(this)
}
componentDidMount() {
BooksAPI.getAll().then((books) => {
this.setState({ books })
})
console.log(this.state.books);
}
filterByShelf = (bookName,shelfName) =>
bookName.filter(book => book.shelf===shelfName)
isTheBookNew = book => {
let is = false;
if (book.shelf === "none")
{ this.setState(state =>
{
books: state.books.push(book)});
is = true;
console.log(this.state.books);
}
return is;
};
handleShelfChange = (bookOnChange, newSehlf) => {
!this.isTheBookNew(bookOnChange) && this.setState(state => {
let newBooks = state.books.map(book =>
{ if (bookOnChange.id === book.id)
{ book.shelf = newSehlf; }
return book;
});
return {
books: newBooks
};
}
);
BooksAPI.update(bookOnChange, newSehlf);
};
updateState = (booksList) => {
const books = [...this.state.books, booksList]
this.setState({ books });
}
render() {
return (
<div className="app">
<Route exact path="/" render={() => (
<div className="list-books">
<div className="list-books-title">
<h1>MyReads</h1>
</div>
<BookList
books={this.filterByShelf(this.state.books,'currentlyReading')}
shelfName='Currently Reading'
handleShelfChange={this.handleShelfChange}/>
<BookList
books={this.filterByShelf(this.state.books,'wantToRead')}
shelfName='Want to Read'
handleShelfChange={this.handleShelfChange}/>
<BookList
books={this.filterByShelf(this.state.books,'read')}
shelfName='Read'
handleShelfChange={this.handleShelfChange}/>
<div className="open-search">
<Link
to="./search" />
</div>
</div>
)
} />
<Route path="/search" render={() =>
<BookSearch
books={this.state.books}
handleShelfChange={this.handleShelfChange}
updateState={this.updateState}/>
} />
</div>
)
}
}
export default BooksApp
BookSearch.js :
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import escapeRegExp from 'escape-string-regexp'
import sortBy from 'sort-by'
import * as BooksAPI from './BooksAPI'
import BookList from './BookList'
class BookSearch extends Component {
constructor(props) {
super(props);
this.state = {
search:'',
books:[]
}
}
updateSearch = (searchString) => {
this.setState({search: searchString.trim()})
let searchResults = BooksAPI.search(this.state.search,1).then((book_search) => {
if (book_search != undefined) {
console.log(book_search);
book_search.map((book) => book.shelf = 'none');
this.setState({ books : book_search }, this.check); // callback function to this.setState
console.log(this.state.books)
}
})
}
check = () => {
let parent_books = this.props.books;
console.log(this.state.books)
const book_result = this.state.books.map((book) => {
const parent = parent_books.find(parent => parent.title === book.title );
if(parent) {
//console.log(parent);
book.shelf = parent.shelf;
//console.log(book)
}
return book;
})
this.setState({books: book_result}, () => {console.log(this.state.books)})
}
updateParentState = () => {
let getBook = this.state.books.filter(filteredBook => filteredBook.shelf !== "none")
this.props.updateState(getBook)
}
render() {
return(
<div className="search-books">
<div className="search-books-bar">
<Link
to="/"
className="close-search">
Close
</Link>
<div className="search-books-input-wrapper">
<input
type="text"
placeholder="Search by title or author"
value={this.state.search}
onChange={(event) => this.updateSearch(event.target.value)}/>
</div>
</div>
<div className="search-books-results">
<ol className="books-grid">
<BookList
books={this.state.books}
handleShelfChange={this.props.handleShelfChange}
updateParentState={this.updateParentState}/>
</ol>
</div>
</div>
)
}
}
export default BookSearch
BookList.js
import React, { Component } from 'react';
import Book from './Book'
class BookList extends Component {
constructor(props) {
super(props);
this.state = {
showSearchPage : false
}
console.log(this.props.books)
}
render() {
return(
<div className="app">
<div>
<div className="list-books-content">
<div>
<div className="bookshelf">
<h2 className="bookshelf-title">{this.props.shelfName}</h2>
<div className="bookshelf-books">
<ol className="books-grid">
{this.props.books.map(book =>
<li key={book.title}>
<Book
book={book}
handleShelfChange={this.props.handleShelfChange}
update={this.props.updateParentState} />
</li>)
}
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default BookList;
Book.js
import React, { Component } from 'react'
class Book extends Component {
constructor(props) {
super(props);
this.props.updateParentState;
}
render() {
return(
<div className="book">
<div key={this.props.book.title}>
<div className="book-top">
<div className="book-cover" style={{width:128, height:193, backgroundImage: `url(${this.props.book.imageLinks.thumbnail})`}}>
<div className="book-shelf-changer">
<select id="bookName" value={this.props.book.shelf}
onChange={(event) => this.props.handleShelfChange(this.props.book, event.target.value)}>
<option value="moveTo" 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>
<div className="book-title">{this.props.book.title}</div>
<div className="book-authors">{this.props.book.authors}</div>
</div>
</div>
)
}
}
export default Book
So, I have 4 components as shown above.From App component,I am calling BookSearch component where I can search for books and send the books to App component by selecting the value in dropdown. Each book in BookSearch component will initially be assigned a shelf property of "none".When a user selects a shelf value from Booksearch,the book will automatically be added to the App component.So,when I navigate back to the App component from BookSearch,I should be able to see the book in the assigned shelf.So,for this case,I am using the updateSearch function. The books are displayed through the Book component which has the dropdown value.

If i understood this correctly, you are mutating the state in the function updateState.
What you should be doing instead is,
const updateState = (booksList) => {
const books = [ ...this.state.books, ...booklist ];
this.setState({ books });
}

In parent component constructor add the following line:
this.updateState = this.updateState.bind(this)
More at https://reactjs.org/docs/handling-events.html