0

https://codesandbox.io/s/vigilant-leftpad-2mc6n?file=/src/index.js enter image description here

Let's say initial color prop is "red". div background becomes red. By erasing letter "d" from the input, we are passing string "re" to the Box "color" prop. However, div still remains red as if prop was string "red". Div tag looses its color, only when input is totally empty.

Why Box component ( div ) does not react to invalid css color passed to it ?

AmirA
  • 194
  • 10

2 Answers2

0

re is not a valid color. To do this properly make sure your <Box> only recieves valid colors. I would use a switch statement like this to match the user input colors. So if the userInput is not a valid color it defaults to white.

Another option is to give the user a select input with pre-defined colors instead of text input.

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Box from "./Box";

import "./styles.css";

function App() {
  const [userInput, setUserInput] = useState("red");
  const [boxColor, setBoxColor] = useState("red");

  const onChange = e => {
    switch (e.target.value) {
      case "red":
        setBoxColor("red");
        break;
      default:
        setBoxColor("");
        break;
    }
    setUserInput(e.target.value);
  };

  return (
    <div className="App">
      <label htmlFor="colorInput">Selected Color: </label>
      <input onChange={e => onChange(e)} value={userInput} id="colorInput" />
      <Box color={boxColor} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
PolarisRouge
  • 395
  • 5
  • 14
0

From what I can see, React only modifies the relevant css value (in this case background-color) in two cases: 1. when a truthy value is replaced with a falsy one (for example, when "r" is changed to "") or when a different valid color value is entered (for example, changing "darred" to "darkred").

In order to have the behavior you're looking for (switching from red to white when "red" is repalced with "re"), you must include a check of whether the entered string is a valid color value. I copied a function that makes this check from this stackoverflow issue Javascript - check if string is valid CSS color? and modified your component to the following:

function App() {
  const [userInput, setUserInput] = useState("");

  const onChange = (e) => {
    setUserInput(e.target.value);
  };

  function isColor(strColor) {
    var s = new Option().style;
    s.color = strColor;
    return s.color == strColor;
  }

  return (
    <div className="App">
      <label htmlFor="colorInput">Selected Color: </label>
      <input onChange={onChange} value={userInput} id="colorInput" />
      <Box color={isColor(userInput) ? userInput : ""} />
    </div>
  );
}

Seeing as how this check is not done automatically by React, my best guess as to what's going on under the hood is that React checks if the new value is truthy and if it is a color. If the value is truthy but not a color value, the css is not modified. If the new input value is falsy, React switches the color to white since the value is now evaluated as null (what you were expecting when you switch from "red" to "re).

dmc85
  • 250
  • 1
  • 9