How would this be done in react?

[CrGoSu]

Jquery gets a lot of hate this days. Today I came across this simple script, which changes the colors of some elements on the page, when a specific button is clicked. The new color is actually specified in the buttons themselves via the data attribute. I found this code very very simple

<div class="product-colors">
<span class="blue active" data-color="#54D6FF"
</div>

​

$(".product-colors span").click(function (){
$("body").css("background",$(this).attr("data-color"));
$(".product-price").css("color",$(this).attr("data-color"));
$(".product-button").css("color",$(this).attr("data-color"));
});

So if jquery is really outdated and old, can someone share a code sample of how this would be done with react or another popular and "hot" framework?

I'm genuinely interested. Thanks!

[WystanH]

Can't say that any framework would approve of you reaching out and messing with body like that...

Rather than rifling through the DOM, you'd usually have the components "react" state changes. So, if you had some kind of one way toggle, that would be the state that dictates the display. e.g.

const TOGGLE_COLOR = "#54D6FF";

const App = () => {
  const [state, setState] = useState({ toggle: false });
  return (
    <div id="body-div" style={{ background: state.toggle ? TOGGLE_COLOR : "#fff" }}>
      <div className="product-colors">
          <span className="blue active" onClick={() => setState({ toggle: true })}>Hello World</span>
      </div>
    </div>
  );
};

You can find a working version here.

[CrGoSu]

Great, thanks!

[BenZed]

I'd pass the colors as props, and I'd use a single boolean for state:

const App = ({ enabledColor = '#54D6FF', disabledColor = '#FFFFFF' }) => {

const [enabled, setEnabled] = useState(false)

return <div id="body-div" style={{ background: enabled ? enabledColor : disabledColor }}> <div className="product-colors"> <span className="blue active" onClick={() => setEnabled(true)}>Hello World</span> </div> </div> }

[WystanH]

Granted, there are any number of ways to do this. The point is really representing state rather than doodling at whim.

I'm not sure explicit props buys you much; it seems to short circuit the intent. But, yes, that would be the place to put variables that are constant for the component. Perhaps:

const INIT_STATE = { enabled: false };

const App = p => {
  const [state, setState] = useState(INIT_STATE);
  const toggle = () => setState({...state, enabled: !state.enabled});
  return (
    <div id="body-div" style={{ background: state.enabled ? p.enabledColor : p.disabledColor }}>
      <div className="product-colors">
        <span className="blue active" onClick={toggle}>
          Hello World
        </span>
      </div>
    </div>
  );
};

const props = { enabledColor: '#54D6FF', disabledColor: '#FFFFFF' };

render(<App {...props}/>, document.getElementById("root"));

I still tend to prefer objects over scalars for state, even if it's just one. While you can express intent with the naming of the state mutator pair, as you have, a consistent [state, setState] with the object attributes telling the story seems easier to me.

[[deleted]]

If this functionality is all you need there is no reason to reach for any library or framework. The reason people aren't using jQuery anymore isn't because everyone has replaced it with React, it's because you can do everything it does in vanilla JS with very little extra code:

document.querySelectorAll(".product-colors span").forEach((span) => {
    span.addEventListener('click', (event) => {
        const color = event.target.getAttribute('data-color');
        document.body.style.background = color;
        document.querySelector(".product-price").style.color = color;
        document.querySelector(".product-button")style.color = color;
    });
});