JSX

Adding custom styling to an element uses different syntax,

<button style="background-color:blue;color:white;">Submit </button>

Wrap it in {{}},
remove the dash in backgroundcolor and capitalize the 2nd word instead,
remove double quotes,
remove ; and add a comma if its multiple styles.
put the style values in single quotes

 <button style={{ backgroundColor: 'blue', color: 'white' }}></button>

Adding a class to an element uses different syntax, className instead of class.

<div className="my-class"></div>

JSX can reference JS variables and functions!.
Simply wrap the variable name in { }

 <button style={{ backgroundColor: 'blue', color: 'white' }}>{buttonText}</button>
//or call a function to retrieve a value
 <button style={{ backgroundColor: 'blue', color: 'white' }}>{getButtonText()}</button>

What you can’t do!
Calling an object to show up as TEXT inside an JSX(html)-Element!

const App = () => {
  const buttonText = { text: "Click me!" };
  return (
    <div>
      <label class="label" for="name">
        Enter Name:
      </label>
      <input id="name" />
      <button style={{}}>{buttonText}</button>
    </div>
  );
};

Error: Objects are not valid as a React child (found: object with keys {text}).

However, you can call the property of the object!

const App = () => {
  const buttonText = { text: "Click me!" };
  return (
    <div>
      <label class="label" for="name">
        Enter Name:
      </label>
      <input id="name" />
      <button style={{}}>{buttonText.text}</button>
    </div>
  );
};

However, you CAN call objects inside jsx as well as long as you dont try display them as text or similar. For example this works:

const App = () => {
  const buttonText = { text: "Click me!" };
  const style = { backgroundColor: "blue", color: "white" };
  return (
    <div>
      <label class="label" for="name">
        Enter Name:
      </label>
      <input id="name" />
      <button style={style}>{buttonText.text}</button>
    </div>
  );
};

Add your comment