React pass data from mapped child to new component - reactjs

Question

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?

Answer 1

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.

Answer 2

You need to use Lifting State Up in React

Answer 3

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>
};

Answer 4

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;