Styjun

I have a shopping catalog, I want to get data from the child and pass to a new component. I've mapped data from JSON (later to be an api call) and I want to get a few props from the mapped child component ie name, price, and the count (which is part of the component, not the original data)

data(name/price) -> mainComponent -> mapped to childComponent(has count)-> mainComponent

should I be using forms? some lifecycle methods? redux? Router? not really sure how to go about this.

Data

const marketData = [
 
 id: 1,
 name: "product1",
 price: "$2",
 ,
 
 id: 2,
 name: "product2",
 price: "$3",
 ,
 
 id: 2,
 name: "product3",
 price: "$3",
 
]

Parent

import React, Component from 'react';
import MarketItem from './MarketItem.js'
import MarketData from './MarketData.js'


class MarketContainer extends Component 
 constructor() 
 super()
 this.state = 
 market: MarketData
 
 

 render() 
 const marketItems = this.state.market.map(item => <MarketItem key=item.id product=item />)

 return (
 <div>
 marketItems
 </div>
 );
 


export default MarketContainer;

child

import React, Component from 'react';

class MarketItem extends Component 
constructor(props)
 super(props)
 this.state = 
 count : 0
 



IncrementItem = () => 
 this.setState( count: this.state.count + 1 );

IncrementItemBy10 = () => 
 this.setState( count: this.state.count + 10 );


render()
 return (
 <div className="MarketItem">
 <div className="market__content">
 <h1>this.props.product.name + " " + this.props.product.price</h1> 
 </div> 
 <div className="market__counter">
 <button className="market__button--minus" onClick=this.DecreaseItem>-</button>
 <p>this.state.count</p>
 <button className="market__button--plus" onClick=this.IncrementItem>+</button>
 </div>

 </div>
 );
 

export default MarketItem;

Within parent (marketContainer) I want to get the count, name, and price from every child component, make a new component. I've tried forms, but wasn't really happy with that should I use lifecycle methods? redux? Router?

class MarketContainer extends Component 
 state = 
 count : 0
 

 IncrementItem = () => 
 this.setState(count: count + 1)
 

 DecreaseItem = () => 
 this.setState(count: count - 1)
 

 render() 
const marketItems = this.state.market.map(item => <MarketItem key=item.id 
 product=item IncrementItem=this.IncrementItem DecreaseItem=DecreaseItem count=this.state.count/>)

 return (
 <div>
 marketItems
 </div>
 );
 

now you can use IncrementItem and DecreaseItem props on MarketItem component when user click on increment and decrement icon. also we're passing value of count from parent component so you can show in child component.

You need to use Lifting State Up in React

You can define the state in MarketContainer for counts and other fields that you need to pass to other child components.

I have tried to include the codes to illustrate how I would do that.

 //MarketData.js
 //after ajax request
 const marketData = [

 
 id: 1, 
 name: "product1", 
 price: "$1"
 , 

 
 id: 2, 
 name: "product2", 
 price: "$2"
 
 ]; 

 //We can format market data as per we need it in components

 const formattedMarketData = marketData.map(e => 
 e.count = 0; 
 return e;
 );





 //parent component
 //let us define all the things which we might need to pass to other components in here
 // ... 

 constructor()
 
 super(); 
 this.state = 
 markets: formattedMarketData
 

 

 /* we are handling all state changes in parent component
 we have updated state in parent component
 we can deliver the changed state to any other components */
 IncrementItem = (id) => 
 this.setState((prevState) => 
 const markets = ...prevState.markets; 
 const index = markets.findIndex(x => x.id ===id);
 markets[index].count = prevState.markets[index].count + 1; 
 return 
 markets: markets
 ;
 );
 

 DecrementItem = (id) => 
 this.setState((prevState) => 
 const markets = ...prevState.markets;
 const index = markets.findIndex(x => x.id ===id);
 markets[index].count = prevState.markets[index].count - 1; 
 return 
 markets: markets
 ;
 );
 

 render() 
 const marketItems = this.state.market.map(item => <MarketItem IncrementItem=this.IncrementItem DecrementItem=this.DecrementItem key=item.id product=item />)

 return (
 <div>
 marketItems
 </div>
 );
 



//child component 

export default (props) => 
 const IncrementItem, DecreaseItem, product = props;
 <div className="MarketItem">
 <div className="market__content">
 <h1>product.name + " " + product.price</h1> 
 </div> 
 <div className="market__counter">
 <button className="market__button--minus" onClick=() => DecreaseItem(product.id)>-</button>
 <p>product.count</p>
 <button className="market__button--plus" onClick=() => IncrementItem(product.id)>+</button>
 </div>

 </div>
;

I think this is the way you should design your state to keep the count relevant to the products.

import React, Component from 'react';
import MarketItem from './MarketItem.js'

class MarketContainer extends Component 
 constructor() 
 super()
 this.state = 
 market: [
 
 id: 1,
 name: "product1",
 price: "$2",
 count:0,
 ,
 
 id: 2,
 name: "product2",
 price: "$3",
 count:0,
 ,
 
 id: 2,
 name: "product3",
 price: "$3",
 count:0,
 
 ]
 


IncrementItem = (i) => 
 let market = this.state.market;
 market[i].count += 1; 
 this.setState(market);


DecreaseItem = (i) => 
 let market = this.state.market;
 market[i].count -= (market[i].count > 0) ? 1: 0; 
 this.setState(market);


render() 
 const marketItems = this.state.market.map(item => <MarketItem key=item.id product=item i=i IncrementItem=this.IncrementItem DecreaseItem=this.DecreaseItem/>)

 return (
 <div>
 marketItems
 </div>
 );
 


export default MarketContainer;

child

import React, Component from 'react';

class MarketItem extends Component 
 constructor(props)
 super(props);
 

 render()
 return (
 <div className="MarketItem">
 <div className="market__content">
 <h1>this.props.product.name + " " + this.props.product.price</h1> 
 </div> 
 <div className="market__counter">
 <button className="market__button--minus" onClick=() => this.props.DecreaseItem(this.props.i)>-</button>
 <p>this.state.count</p>

 <button className="market__button--plus" onClick=() => this.props.IncrementItem(this.props.i)>+</button>
 </div>

 </div>
 );
 


export default MarketItem;