Hello,
Maybe I forgotten something, but I wonder how to add directly one property to a Fonctional Component?
In the courses it seems to me that I saw how to put a property passinf by another component but not direcly
For exemple, I would like add one props property “color: red” to this Fonctional Component:
const Fruits = () => {
return (
);
};
How you do that ?
Furthermore, I wonder how to display all properties of props in this case ?
props you pass to react components are found in the props objects, which is the first parameter react components get by default. For example you can access it this way:
const Fruits = (props) => {
console.log(props.color)
return (
);
};
Or you can use destructuring, accessing directly the color property:
const Fruits = ({color}) => {
console.log(color)
return (
);
};
Ofc, for the component to get such propety, you must pass it, when you call it:
<Fruits color="red"/>
You can use spread operator, applied to an object which contains your properties, which is comfortable if there are more than one properties:
<Fruits {...{color: "red", text: 'apple'}}/>
To check what props are in the props object, you just call it:
const Fruits = (props) => {
console.log(props)
return (
);
};
So we can’t add propeties from Fonctional Component itself, but only from the outside ?
Smething like that is not possible ?
const Fruits = (props) => {
props.color: red,
props.size: big
};
i dont see a point making that.
You can simply add your own local variables, if you need:
const Fruits = (props) => {
let color='red'
return (
);
};
The props object purpose is to take properties from the outside and be used within the component. I dont see what the purpose would be to add additional props to the propcs obj from within.
Correct. When you try to change the props argument, you will get an error saying TypeError: Attempted to assign to readonly property.
My example was not good. it’s more like a tantative to modify a property.
Your answer is more in line with what I wanted to do.
Now if you tell me that it makes no sense to fill in the properties inside the Component, I will wait to go further in the course to realize it by myself.
How about my second question:
Furthermore, I wonder how to display all properties of props in this case ?
Display where? You can easily log it to the console.
I tried but that not worked
const Items = (props) => { //stateless fonctional component
let props.color= 'red'
console.log(props)
return <h1>Current Quantity of Items in Cart: {props.quantity}{props.color}</h1>
};
Items.defaultProps = {
quantity: 0
};
console.log works for “quantity”, but I would like for exemple add “color: red” to props and display it with console.log.
How can I do that?
Like I said, you can’t change the props argument inside the function. Any changes have to occur before it is passed down to Items.
for an Object, if I want add one property I do that:
MyObject.key = value;
So as props is an Object that’s woul be possible, no ?
React is probably calling Object.freeze() on props before it is passed down to the child component. Object.freeze() ‘freezes’ an object so that no properties can be added or changed.
const obj = {
color: 'red',
someProperty: 'foo'
}
Object.freeze(obj)
obj.text = 'hello world' // throws an error
First of all, don’t do it. Don’t mess with props and don’t mutate state directly - that will cause React to not work correctly. Secondly, in JS you can freeze objects so they can’t change them.
But why do you need to? What are you trying to accomplish?
It’s just to understand how it works in depth. 
With your console.log problem, is this an FCC challenge? Make sure you are using the console browser, not the fake FCC one.
As I said finally console log works. I Can display “quantity”.
OK, but “props”, by definition, are values that are injected into the component from outside. If you want to change the props, change them outside the component, when they’re passed in.
But you said it’s not working for props? To me that mean that it’s not working.
Do you have a link for this challenge?