Vamos criar um componente Notification versátil que exibe texto e altera dinamicamente a propriedade background-color com base na prop behavior. A implementação será realizada passo a passo.

Passo 1

Iniciamos criando o componente pai, App, juntamente com o componente filho, Notification, utilizando a estrutura básica do React.

// 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 />);

Etapa 2

Para fornecer uma estilização padrão para o componente Notification, criamos um objeto chamado notificationStyles e atribuimos as seguintes propriedades: padding com o valor de "20px"; fontSize com o valor de "24px"; color com o valor de "aquamarine";

// Define default styles as an object
const notificationStyles = {
  padding: "20px",
  fontSize: "24px",
  color: "aquamarine",
};

Atribuir o objeto notificationStyles como valor para o atributo style do componente Notification component, que é aplicado ao elemento p retornado.

// Child component - Notification
const Notification = (props) => (
  <>
    {/* Step 2: Apply default styles using inline styles */}
    <p style={notificationStyles}></p>
  </>
);

Etapa 3

No componente App, é possível utilizar o componente Notification passando as props behavior e text. A prop behavior determina a aparência da notificação, enquanto a prop text especifica o texto a ser exibido dentro da notificação.

// 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" />
  </>
);

Etapa 4

É possível implementar a lógica para colorir o fundo de cada mensagem de notificação com base na prop behavior da seguinte forma:

• Se o valor de behavior for "positive", a cor de fundo deve ser green;
• Se o valor de behavior for "negative", a cor de fundo deve ser red;
• Se o valor de behavior for "neutral", a cor de fundo deve ser blue.

Pode-se criar uma função para tratar essa lógica utilizando a instrução switch do JavaScript. Veja um exemplo de implementação:

// 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";
  }
};

Essa função recebe a prop behavior como argumento e retorna a cor de fundo correspondente com base no valor utilizando a instrução switch. A prop behavior retornará uma cor de fundo transparent caso não corresponda aos casos especificados.

Vamos incorporar essa função ao objeto de estilos do componente:

// 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>
  </>
);

Utilizam-se convenções do JavaScript para garantir a estrutura adequada do objeto de estilos. Primeiro, espalha-se o objeto notificationStyles existente. Em seguida, adiciona-se uma propriedade adicional, backgroundColor, cujo valor é derivado da string retornada pela função setBackgroundColor.

Código completo do aplicativo: