Attribute syntax assigns values inside JSX element tags with key=value pairs. It works for standard HTML attributes and properties passed to custom React components. section 3.2.5
Use the same tag-based pattern for fixed and dynamic values:
- Write hardcoded values such as href="//react.dev" directly in the tag. section 3.2.5
- Wrap dynamic JavaScript values in curly braces, such as href={this.props.url} or title={this.props.label}. section 3.2.5
- Pass values to custom components with the same syntax, then read them through component properties. section 3.2.5
A dynamic profile link
A ProfileLink component can turn parent-supplied url and label values into anchor properties: <a href={this.props.url} title={this.props.label}>Profile</a>. Create it with <ProfileLink url="/users/johnny" label="Profile for Johnny" />. section 3.2.5
class ProfileLink extends React.Component {
render() {
return (
<a
href={this.props.url}
title={this.props.label}
target="_blank">Profile
</a>
);
}
}
Inspect a complete component that uses dynamic attribute values and a fixed target property. section 3.2.5
