I'm trying to learn React from existing code, in the props section there is code like this
const {
products,
productDetail = {product:{}, productColor:[] },
location={},
history
} = props
I don't understand on the productDetail and location, why is there {product:{}, productColor:[] }, what is the purpose of that?
These are some default values for the specified props.
Looking at the provided example, I can say that history and products are required - when someone tries to render the component, he is obliged to procide that information.
However, the productDetails and location have default values so they are optional. The person trying to render this component may provide some values (if he wants to) but he is not obliged to do so.
Essentially what you have here is nothing more than a declaration of a variable (and assigning given by the object 'props'). Instead of the code posted one could write:
const productDetail = {product:{}, productColor:[] }
productDetail is a variable. A variable that happens to be an object.
This object contains two values, one named product that itself is defined as another object (hence why the '{}' is there) and productColor which is an array as the '[]' indicate.
Same with location. The "type" is array and the default value of that variable is an empty array.