Applying Inline Styles in Practice

Let's create a versatile Notification component that displays text and dynamically changes the background-color property based on the behavior prop. We will proceed with the implementation step-by-step.

Step 1

We begin by creating the parent component, App, along with the child component, Notification, using the basic structure of React.

jsx
99
1
2
3
4
5
6
7
8
9
10
11
12
13
// Import necessary dependencies and create a root element
import { createRoot } from "react-dom/client";

const root = createRoot(document.getElementById("root"));

// Child component - `Notification`
const Notification = (props) => <></>;

// Parent component - `App`
const App = () => <></>;

// Render the `App` component to the root element
root.render(<App />);

Step 2

To provide default styling for the Notification component, we create an object called notificationStyles and assign the following properties: padding with the value of "20px"; fontSize with the value of "24px"; color with the value of "aquamarine";

js
9
1
2
3
4
5
6
// Define default styles as an object
const notificationStyles = {
  padding: "20px",
  fontSize: "24px",
  color: "aquamarine",
};

Let's assign the notificationStyles object as the value to the style attribute of the Notification component, which is applied to the returned p element.

jsx
9
1
2
3
4
5
6
7
// Child component - Notification
const Notification = (props) => (
  <>
    {/* Step 2: Apply default styles using inline styles */}
    <p style={notificationStyles}></p>
  </>
);

Step 3

In the App component, we can utilize the Notification component by passing the behavior prop and the text prop. The behavior prop determines the appearance of the notification, while the text prop specifies the text to be displayed within the notification.

jsx
9
1
2
3
4
5
6
7
8
9
// Parent component - `App`
const App = () => (
  <>
    {/* Step 3: Use the Notification component with behavior and text props */}
    <Notification text="Success" behavior="positive" />
    <Notification text="Failure" behavior="negative" />
    <Notification text="Information" behavior="neutral" />
  </>
);

Step 4

We can implement the logic to colorize the background of each notification message based on the behavior prop in the following way:

• If the value of behavior is "positive", the background color should be set to green;

• If the value of behavior is "negative", the background color should be set to red;

• If the value of behavior is "neutral", the background color should be set to blue.

We can create a function to handle the logic using the JavaScript switch statement. Here's an example of how it can be implemented:

js
99
1
2
3
4
5
6
7
8
9
10
11
12
13
// Function to set background color based on `behavior` prop
const setBackgroundColor = (behavior) => {
  switch (behavior) {
    case "positive":
      return "green";
    case "negative":
      return "red";
    case "neutral":
      return "blue";
    default:
      return "transparent";
  }
};

This function takes the behavior prop as an argument and returns the corresponding background color based on the value using the switch statement. The behavior prop will return a transparent background color if it does not match the specified cases.

Let's incorporate this function into the style object of the component:

jsx
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Child component - `Notification`
const Notification = (props) => (
  <>
    {/* Step 2, : Apply default styles using inline styles */}
    {/* Step 4, : Apply the value for the `background-color` property 
    based on the `behavior` prop */}
    <p
      style={{
        ...notificationStyles,
        backgroundColor: setBackgroundColor(props.behavior),
      }}
    >
      {props.text}
    </p>
  </>
);

We utilize JavaScript conventions to ensure the proper structure of the style object. First, we spread the existing notificationStyles object. Then, we introduce an additional property, backgroundColor, whose value is derived from the string returned by the setBackgroundColor function.

Full app code: