React props of parent are not passed to child component - reactjs

Question

I'm passing props to a child component, from a parent component that receive this same prop from his own parent.
For some reason, when the parent props get updated, this update does not affect the child component.
The component in itself is very basic:
here's the parent :
import React, { Component } from 'react'
import styled from 'styled-components'
import { Icon } from 'antd'
import BaseProductSelector from '../BaseProductSelector'
import BaseProductPreview from '../BaseProductPreview'
import FullDesignSelector from '../FullDesignSelector'
import ColorPicker from '../ColorPicker'
import GeneratorProgress from '../GeneratorProgress'
import GeneratorError from '../GeneratorError'
import BPDetails from './BPDetails'
const GeneratorFlow = styled.div`
/*background-color: #eeeeee;*/
padding: 0 60px;
h3 {
color: #444;
}
.innerGenFlow {
padding: 15px;
border-radius: 5px;
box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.35);
}
`
export default class ProductGeneratorFlow extends Component {
constructor(props) {
super()
let colors
if (props.product) {
colors = props.product.variations.filter(p => p.type === 'color')
} else {
colors = []
// colors.push(props.baseProduct.variations.filter(p => p.type === 'color')[0])
}
this.state = {
pickedColors: colors,
done: false,
error: false,
}
this.setStep = this.setStep.bind(this)
this.setKey = this.setKey.bind(this)
this.showBP = this.showBP.bind(this)
this.hideBP = this.hideBP.bind(this)
this.onChange = this.onChange.bind(this)
this.toggleColor = this.toggleColor.bind(this)
this.toggleAll = this.toggleAll.bind(this)
this.productCreated = this.productCreated.bind(this)
this.productPending = this.productPending.bind(this)
this.setFirstColor = this.setFirstColor.bind(this)
this.displayError = this.displayError.bind(this)
}
setStep(step) {
this.setState({ step })
}
showBP() {
this.setState({ BPDisplayed: true })
}
hideBP() {
this.setState({ BPDisplayed: false })
}
getBaseProd() {
const bpid = this.props.product.supplierBaseProductId
const result = this.props.base_products.filter(obj => obj._id === bpid)
return result[0]
}
setKey(activeKey) {
this.setState({
activeKey,
})
}
onChange(activeKey) {
this.setState({
activeKey,
})
}
productPending() {
this.setState({
done: false,
error: false,
})
this.props.showBP()
}
productCreated() {
this.props.displaySuccess()
this.setState({ done: true })
}
displayError() {
this.setState({ error: true })
}
toggleColor(color) {
let pickedColors = this.state.pickedColors
if (this.state.pickedColors.includes(color)) {
// console.log(pickedColors.filter(i => i != color).length)
pickedColors = pickedColors.filter(i => i != color)
} else {
pickedColors.push(color)
}
this.setState({
pickedColors,
})
}
test(id) {
this.setState({picked: true})
this.props.select(id)
}
toggleAll(value) {
if (value === true) {
this.setState({
pickedColors: this.props.baseProduct.variations.filter(p => p.type === 'color'),
})
} else {
this.setState({ pickedColors: [] })
}
}
setFirstColor() {
if (this.state.pickedColors.length > 0) {
this.props.setVariation(this.state.pickedColors[0])
}
}
render() {
if (this.state.error) {
return (
<GeneratorError
showBP={this.props.showBP}
reset={this.productPending}
/>
)
}
if (this.state.done) {
return (
<GeneratorProgress
active
showBP={this.props.showBP}
reset={this.productPending}
/>
)
}
if (this.props.product) {
return (
<GeneratorFlow>
<FullDesignSelector
designs={this.props.designs}
select={this.test}
addedDesigns={this.props.addedDesigns}
getImage={this.props.getImage}
removeDesign={this.props.removeDesign}
active
printingZone={this.props.printingZone}
setStep={this.setStep}
showBP={this.showBP}
showDS={this.props.showDS}
setKey={this.setKey}
/>
<ColorPicker
baseProduct={this.props.baseProduct}
product={this.props.product}
picked={this.state.pickedColors}
toggleColor={this.toggleColor}
variation={this.props.variation}
selectAll={this.toggleAll}
toggleFirstColor={this.props.toggleFirstColor}
setVariation={this.props.setVariation}
selectedColor={
this.props.variation ? this.props.variation.value : null
}
setPreviewColor={this.props.setVariation}
/>
<BaseProductPreview
addedDesigns={this.props.addedDesigns}
size={this.props.size}
shop={this.props.shop}
printingZone={this.props.printingZone}
picked={this.state.pickedColors}
previews={this.props.previews}
product={this.props.product}
setDone={this.productCreated}
baseProduct={this.getBaseProd()}
displaySuccess={this.props.displaySuccess}
generatorError={this.displayError}
status='edition'
setKey={this.setKey}
products={this.props.products}
productLoading={this.props.productLoading}
/>
</GeneratorFlow>
)
}
return (
<GeneratorFlow>
<ColorPicker
picked={this.state.pickedColors}
toggleColor={this.toggleColor}
baseProduct={this.props.baseProduct}
toggleFirstColor={this.setFirstColor}
variation={this.props.variation}
selectAll={this.toggleAll}
setVariation={this.props.setVariation}
selectedColor={
this.props.variation ? this.props.variation.value : null
}
setPreviewColor={this.props.setVariation}
/>
<FullDesignSelector
designs={this.props.designs}
select={this.props.select}
addedDesigns={this.props.addedDesigns}
getImage={this.props.getImage}
printingZone={this.props.printingZone}
removeDesign={this.props.removeDesign}
active
setStep={this.setStep}
showBP={this.showBP}
showDS={this.props.showDS}
setKey={this.setKey}
/>
<BaseProductPreview
addedDesigns={this.props.addedDesigns}
baseProduct={this.props.baseProduct}
generatorError={this.displayError}
size={this.props.size}
displaySuccess={this.props.displaySuccess}
shop={this.props.shop}
picked={this.state.pickedColors}
setDone={this.productCreated}
printingZone={this.props.printingZone}
previews={this.props.previews}
setPreview={this.props.setPreview}
status='creation'
setStep={this.setStep}
products={this.props.products}
productLoading={this.props.productLoading}
/>
</GeneratorFlow>
)
}
}
And here is the only part thst uses this prop in the child
import React, { Component } from 'react'
import styled from 'styled-components'
import toPx from 'unit-to-px'
import _ from 'lodash'
import { LocalForm, Control } from 'react-redux-form'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { toast } from 'react-toastify'
import { Input, Select, Icon, Tooltip } from 'antd'
import s3 from '../../../../../services/s3'
import theme from '../../../../../theme/theme'
import Alert from '../../../../../components/Alert'
import { createProduct, modifyProduct } from '../../../../../modules/products'
// import ProductImage from '../../../../../components/ProductImage'
class BaseProductPreview extends Component {
constructor(props) {
super(props)
let colors
if (props.product) {
colors = Object.assign([], props.product.variations.filter(v => v.type === 'color'))
} else {
colors = []
}
this.state = {
name: props.product ? props.product.name : '',
displayDescription: props.product ? Object.assign({}, props.product.displayDescription) : {},
collections: (props.product && props.product.collections) ? props.product.collections : [],
pricing: props.product ? Object.assign({}, props.product.pricing) : { margin: 0 },
elevdone: false,
i: 0,
colors,
}
this.createInnerProduct = this.createInnerProduct.bind(this)
this.getPrice = this.getPrice.bind(this)
}
oneColor() {
if (this.props.baseProduct.variations && this.state.colors) {
let colorAlert
if (this.state.colorAlertShown) {
colorAlert = <Alert message='Choisissez au moins une couleur' type='error' />
}
const colorsBp = this.props.baseProduct.variations.filter(v => v.type === 'color')
if (colorsBp.length <= 1) {
return ''
}
return (
<div>
<p>Choix de couleur :</p>
{ colorAlert }
<span
className='bullet-color'
>
{this.getColorsRef(this.props.baseProduct).map(value =>
(<div
onClick={() => { this.toggleColor(value) }}
className={this.colorIsInProduct(value)}
style={{ backgroundColor: value }}
/>))}
</span>
</div>)
}
return null
}
getColorsRef() {
return this.props.baseProduct.variations.filter(v => v.type === 'color').map(a => a.value)
}
colorIsInProduct(couleur) {
// true/false
let active
if (this.state.colors.find(v => v.value === couleur)) {
active = 'active-color'
}
return active
}
toggleColor(couleur) {
// const item = this.state.item
const colors = this.state.colors
// si on a deja la couleur dans le produit on l'enlève
if (colors.find(v => v.value === couleur) && colors.length > 1) {
// je retire cette couleur des varaitions de mon produits
const index = colors.indexOf(colors.find(v => v.value === couleur))
colors.splice(index, 1)
} else if (colors.find(v => v.value === couleur)) {
this.setState({ colorAlertShown: true })
} else {
// on va chercher la variation couleur corespondante
// dans le base product et on la copie dans le product
this.setState({ colorAlertShown: false })
colors.push(this.props.baseProduct.variations.find(v => v.value === couleur))
}
this.setState({ colors })
// TODO on change la couleur du mockup
}
getJsonsObjects(printingZones) {
// INITIATE EMPTY JSON OBJECT
const jsonsArray = {}
// GET CURRENT CANVAS
printingZones.map((item) => {
const y = document.getElementById(`${item}-canvas`).fabric
const helper = _.filter(y.getObjects(), { clipFor: 'layer' })[0]
if (helper) {
helper.set({ stroke: 'transparent' })
}
jsonsArray[item] = y.toJSON(['height'])
})
return jsonsArray
}
getCustomizationPrice() {
let customizationPrice = 0
Object.keys(this.props.baseProduct.printingZone).map((item) => {
const y = document.getElementById(`${item}-canvas`).fabric
const items = y.getObjects()
if (items.length > 1) {
customizationPrice = customizationPrice + 5
}
})
customizationPrice = customizationPrice - 5
if (customizationPrice < 0) {
customizationPrice = 0
}
return customizationPrice
}
getAction() {
return (<p>Créer mon produit</p>)
}
marginValidation(value) {
let returned_value = value
if (value == '') {
returned_value = 0
}
if (!value) {
returned_value = 0
} else if (value > 100) {
// TODO Show moreThan100Alert
returned_value = 100
}
const pricing = Object.assign({}, this.state.pricing, { margin: returned_value })
this.setState({ pricing })
}
validForm() {
if (this.state.name && this.props.picked.length > 0 && this.state.pricing.margin >= 0 && this.props.addedDesigns.length > 0) {
return false
}
return true
}
getPrice() {
const position_print = this.props.addedDesigns.map(d => {
return d.position
})
// uniq(position_print)
const count = []
position_print.map((position) => {
if (count.indexOf(position) === -1) {
count.push(position)
}
})
if (count.length <= 1) {
return (
<div>
<p className='price'>Cout de production <span>{this.props.baseProduct.unitPrice} €</span></p>
<div className='price-marge'>Vos bénéfices <span className='requiredField2'>*</span>
<Control.text
component={Input}
className='inputMarge'
model='.margin'
value={this.state.pricing.margin}
onChange={(e) => {
this.marginValidation(e.target.value.replace(',', '.'))
}}
/>
</div>
<hr />
<div className='price-total'>
{`
${parseFloat(this.props.baseProduct.unitPrice)
+
parseFloat(this.state.pricing.margin)} €`}
</div>
</div>
)
}
if (count.length > 1) {
return (
<div>
<p className='price'>Cout de production <span>{this.props.baseProduct.unitPrice} €</span></p>
<p className='price'>Impression supplémentaire <span>5 €</span></p>
<div className='price-marge'>Vos bénéfices <span className='requiredField2'>*</span>
<Control.text
component={Input}
className='inputMarge'
model='.margin'
value={this.state.pricing.margin}
onChange={(e) => {
this.marginValidation(e.target.value.replace(',', '.'))
}}
/>
</div>
<hr />
<div className='price-total'>
{`
${parseFloat(this.props.baseProduct.unitPrice)
+
parseFloat(this.state.pricing.margin) + parseFloat(5)} €`}
</div>
</div>
)
}
return null
}
getCategory() {
if (this.props.baseProduct.category.fr[0] === 'Homme' && this.props.baseProduct.category.fr[1] === 'Femme') {
return (<span>Unisex</span>)
}
if (this.props.baseProduct.category.fr[0] === 'Homme') {
return (<span>Homme</span>)
}
if (this.props.baseProduct.category.fr[0] === 'Femme') {
return (<span>Femme</span>)
}
return null
}
showElevio() {
if (this.state.i < 5) {
this.state.i = this.state.i + 1
setTimeout(() => {
if (this.props.productLoading.loading === true || this.props.products.length === 0) {
if (this.props.products.length === 0 && this.state.elevdone === false) {
return (
window._elev.openArticle(263),
this.setState({ elevdone: true })
)
} return null
}
if (this.props.productLoading.loading === false) {
this.showElevio()
}
return null
}, 500)
} return null
}
render() {
const { Option } = Select
const children = []
if (this.props.shop.settings.collections) {
this.props.shop.settings.collections.map((collec, i) => {
children.push(<Option key={collec.name ? collec.name : i}>{collec.name}</Option>)
return null
})
}
this.showElevio()
return (
<StyledBaseProductPreview>
<h2>Description</h2>
<LocalForm
onSubmit={() => this.createInnerProduct()}
>
<div className='form-step'>
<p className='advice-name'>
<Tooltip title='Figurera sur la fiche produit'>
<span>{this.props.baseProduct.subCategory.fr} {this.getCategory()}</span>
</Tooltip>
</p>
<p>Nom <span className='requiredField'>*</span></p>
<Control.text
component={Input}
model='.name'
placeholder='Nom du produit'
value={this.state.name}
onChange={(e) => {
this.setState({ name: e.target.value })
}}
/>
</div>
<div className='form-step'>
<p>Description</p>
<Control.textarea
className='productDescription'
model='.displayDescription'
placeholder='Description du produit'
value={this.state.displayDescription.fr}
onChange={(e) => {
const new_item = Object.assign({}, this.state.displayDescription)
new_item.fr = e.target.value
this.setState({ displayDescription: new_item })
}}
/>
</div>
<div className='form-step'>
<p>Collection(s)</p>
<Select
mode='multiple'
className='styledSelect'
placeholder='Pas de collection'
notFoundContent='Pas de collection'
value={this.state.collections}
style={{ width: '100%' }}
onSearch={(e) => {
this.setState({ toCreate: e })
}}
onChange={(e) => {
this.setState({ collections: e })
}}
>
{children}
</Select>
</div>
<div className='form-step pricingForm'>
<h2>Prix </h2>
<hr />
{this.getPrice()}
</div>
<Crumpet type='submit' className='superCrumpet' disabled={this.validForm()}>
{this.getAction()}
</Crumpet>
</LocalForm>
</StyledBaseProductPreview>
)
}
}
const mapStateToProps = (state, ownProps) => {
console.log(state); // state
console.log(ownProps); // undefined
return({
user: state.user,
addedDesigns: ownProps.addedDesigns,
})
}
const mapDispatchToProps = dispatch => bindActionCreators({
createProduct,
modifyProduct,
}, dispatch)
export default connect(
mapStateToProps,
mapDispatchToProps,
)(BaseProductPreview)
When inspecting these elements, I can see the parent getting updated :
And now, the funny part: when parent props get updated, the first two child component props are updated as well, but BaseProductPreview doesn't !
However, this gets updated as soon as I change the state of the child component.
How comes so ? How can the state update the component props ?

Answer 1

React only act on state not on props. whenever you change state UI gets update with latest changes. bind your props to state in child component and use componentWillReceiveProps(props) to change child state when props get updated in parent component.

Answer 2

Well the only solution I found was to connect a higher component with redux, so that none of the children were redux-related anymore, and then pass the reducer function through props to that child.
Without redux, my component gets updated properly.