I have several components that are essentially unrelated, the first is ShoppingCards

import { sample } from 'rxjs/internal/operators'; import React from 'react'; import ShoppingCard from './ShoppingCard'; import goods from './goods.json'; export default class ShoppingCards extends React.Component { constructor (props){ super(props); this.shoppingCardsJSX = goods.map((good) => { return ( <ShoppingCard key = {good.id } goodId = {good.id} src = {good.src} descr = {good.descr} code = {good.code} size = {good.size} color = {good.color} price = {good.price} onRemoveCard={this.removeCard.bind(this) } /> ); }); } removeCard(obj){ const list = this.shoppingCardsJSX ; for (let i = 0; i < list.length; i++){ if (list[i].key === obj){ list.splice(i, 1); break; } } this.forceUpdate(); } render() { return this.shoppingCardsJSX; } } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

The second is SearchBlock.js:

 import React from 'react'; import main_logo from '../images/logo-main.png'; import ShoppingCard from './ShoppingCard' class SeekBlock extends React.Component { render() { return ( <label htmlFor={this.props.id}> <input type = "text" placeholder="Поиск по сайту" className={this.props.className} id = {this.props.id}/> </label> ) } } export default class SearchBlock extends React.Component { constructor(props) { super(props); this.spanObject = { userName: 'Анастасия'}; } render() { return ( <div className="search-block"> <img className="main-logo" src = {main_logo} alt ={this.props.className}/> <div className="seek-block"> <SeekBlock className="search-string" id = "search"/> </div> <div className="account-block"> <div className="user-info user-info--name"> <a className="user-info__user-name" href="/">{this.spanObject.userName}</a> </div> <div className="user-info user-info--user-bucket"> <a className="user-info__bucket" href="/" >В корзине: 4 <br/> товара</a> </div> </div> </div> ); } } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

The problem is that I need the length of the array this.shoppingCardsJSX.length from ShoppingCards to somehow hit SearchBlock, something like:

 <a className="user-info__bucket" href="/" >В корзине: {this.shoppingCardsJSX.length} <br/> товара</a>

and each time it was updated depending on the length of the array.

The ShoppingCards component is imported into the ShoppingList component, the ShoppingList is imported into the MainContent, and the MainContent is imported into ShopPage. The SearchBlock component is immediately imported into ShopPage.

I just can not figure it out, help please. I read similar solutions on the stack, but none of them could be implemented. Is it even possible to do this without redux?

  • this.forceUpdate() ah ah ah bad so do - ThisMan
  • shoppingCardsJSX why are you storing the ingredients right there? why in a render not to write an array which will be already added by components, instead of what to push everything in the sv-in - ThisMan
  • if the components do not know anything about each other, then they must communicate through a common parent or, again, some state-managment , you can see in the context side if you are using the latest version of the reactor - ThisMan

1 answer 1

make the parent component that will receive goods.json and store it in your state

 class Parent extends React.Component{ constructor() { super() this.state = { goods: JSON.parse(goods.json) } } render() { return( <React.Fragment> <ShoppingCards goods={this.state.goods} /> <SearchBlock goodsLength={this.state.goods.length} /> <React.Fragment> ) } }

This is not the best option, but it is quite suitable ... but generally set yourself a mobx and you will have access to the state at any point of the application.