const Items = (props) => { //stateless fonctional component
console.log(props)
return <h1>Current Quantity of Items in Cart: {props.quantity}{props.color}</h1>
};
Items.defaultProps = {
quantity: 0
};
result:
It’s not in relation to a specific exercise. It’s a personal question.
And isn’t that what is in props? I don’t understand what you mean by, “I wonder how to display all properties of props”
Is there something in the props that you think aren’t showing up.
In fact I tried to add a second one then display both with console.log.
But you said it’s not possible.
So if I well understood, a Function component or Component can treat only one property?
No, there is one props object but it can have many properties.
For exemple in this lesson, If I add a second one that not works:
https://www.freecodecamp.org/learn/front-end-development-libraries/react/render-state-in-the-user-interface-another-way
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'freeCodeCamp',
firstName: 'areYouFree'
}
}
render() {
// Change code below this line
const name = this.state.name;
// Change code above this line
return (
<div>
{ /* Change code below this line */ }
<h1>{name}</h1>
<h2>{firstName}</h2>
{ /* Change code above this line */ }
</div>
);
}
};
What do you mean “add a second one”? A second what?
That’s work with class. I forgotten this: const firstName = this.state.firstName;
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'freeCodeCamp',
firstName: 'areYouFree'
}
}
render() {
// Change code below this line
const name = this.state.name;
const firstName = this.state.firstName;
// Change code above this line
return (
<div>
{ /* Change code below this line */ }
<h1>{name}</h1>
<h2>{firstName}</h2>
{ /* Change code above this line */ }
</div>
);
}
};
I added manually “firstName” and I displayed it.
Now, how I have to do with a Functional Component ?
I’m not sure what any of that has to do with props or displaying them.
I added manually “firstName” and I display it.
You didn’t add that to the props object. You declared and initialized a variable inside the function. It is the same with the functional component, except that it is in the actual function and not the render method.
From your example above:
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>
};
you can just declare a variable:
const Items = (props) => { //stateless fonctional component
const myColor = 'red'
console.log(myColor)
return <h1>Current Quantity of Items in Cart: {props.quantity}{myColor}</h1>
};
But that is not a React issue, that is understanding JS issue.
I should also point out that the prop “quantity” that you are passing in seems to be being spelled in French wherever is being passed - that will cause other problems.
<Fruits color= "red" text='apple'/>
const Fruits = (props) => {
console.log(props) // will log {color: "red", text: "apple"}
return (
<div style={{backgroundColor: props.color}}>{props.text}</div>
);
};
I combined two of the snippets i used earlier. Here you can see the definition of the Fruits component and its render with the props color and text. If you log the props object within the component body, it will display its contents.
Well, you can give default value for the props (this is useful in the case where a prop isn’t always passed in).
Example:
const Fruit = ({something="Apple", somethingElse="Banana"}) =>{
return
(<>{something}</>)
}
This basically means if no parameters are passed down (<Fruit />) the value of the props will be what was defined in the Fruit component.
A post was split to a new topic: Need help with html internal links challenge
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.