In JSX (JavaScript XML), the element class does not support attributes directly because it does not have a ‘props’ property. Instead, attributes can be passed to the element as props.
Props allow you to pass data from a parent component to a child component and can be used to customize and configure the child component.
Here’s an example to clarify the concept:
// Parent component
class ParentComponent extends React.Component {
render() {
// Passing an attribute 'name' with the value 'John' to the ChildComponent
return (
<ChildComponent name="John" />
);
}
}
// Child component
class ChildComponent extends React.Component {
render() {
// Accessing the 'name' attribute using 'this.props'
return (
<div>
Hello, {this.props.name}!
</div>
);
}
}
In the above example, the ParentComponent passes the ‘name’ attribute with the value ‘John’ to the ChildComponent. Inside the ChildComponent, ‘this.props.name’ is used to access the ‘name’ attribute passed from the parent. As a result, the output on the webpage would be:
Hello, John!