Menu
Hopefully my question is clear, I'm mainly looking for a way to dynamically attach attributes to a JSX input.
<input type="text" {variableAttribute}={anotherVariable} />
Is something like this possible without overriding the way JSX compiles from JS to regular HTML?
550
Embedding Expressions in JSX In the example below, we declare a variable called name and then use it inside JSX by wrapping it in curly braces: const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>; You can put any valid JavaScript expression inside the curly braces in JSX. For example, 2 + 2 , user.
JSX stands for JavaScript XML, a coding standard that allows you to use JavaScript expressions and other HTML features inline. Using JSX, you can create a function and return a set of JSX elements to a variable, and that variable used is to render the elements inside the render() function in React.
The class attribute is a much used attribute in HTML, but since JSX is rendered as JavaScript, and the class keyword is a reserved word in JavaScript, you are not allowed to use it in JSX. Use attribute className instead. JSX solved this by using className instead.
To set a data attribute on an element in React, set the attribute directly on the element, e.g. <button data-test-id="my-btn"> or use the setAttribute() method, e.g. el. setAttribute('data-foo', 'bar') . You can access the element on the event object or using a ref .
Specifying Attributes with JSX. You may use quotes to specify string literals as attributes: const element = <div tabIndex="0"></div>; You may also use curly braces to embed a JavaScript expression in an attribute: const element = <img src={user.avatarUrl}></img>;
In programming, just like in algebra, we use variables in expressions (total = price1 + price2). From the example above, you can calculate the total to be 11. JavaScript variables are containers for storing data values. All JavaScript variables must be identified with unique names. These unique names are called identifiers.
JSX is an Expression Too. After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects. This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:
Attribute class = className The class attribute is a much used attribute in HTML, but since JSX is rendered as JavaScript, and the class keyword is a reserved word in JavaScript, you are not allowed to use it in JSX. Use attribute className instead. JSX solved this by using className instead.
You can initialize an object with a computed property name, and then use JSX Spread Attributes to convert it to attribute:
const DemoComponent = ({ variablePropName, variablePropValue }) => {
const variableAttribute = { [variablePropName]: variablePropValue };
return (
<input type="text" { ...variableAttribute } />
);
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
