Question 50740 in Javascript Question posted in
A very good W3school tutorial can be found here.

Im new to coding and React. Please bare with me – Javascript

I want to change the color of the ‘left–innerTopBox’ whenever the changes.
I believe im missing a handleChange function and an onChange. THANKS for you help.

import "./App.css";
import { useState } from "react";

function App() {
  const [color, setColor] = useState({
    color1: "#fff",
  });
  return (
    <>
      <div className="box--control">
        <div className="big--leftBox">
          left box
          <div className="left--innerTopBox" value={color.color1}>
            color here
          </div>
          <div className="left--innerBottomBox">code here</div>
        </div>

        <div className="big--rightBox">
          right box
          <div className="inputs">
            Color 1
            <input
              type="color"
              style={{ marginLeft: 10 }}
              value={color.color1}
            />
          </div>
          <div className="inputs">
            Color 2<input type="color" style={{ marginLeft: 10 }} />
          </div>
        </div>
      </div>
    </>
  );
}
export default App;
Tags:

2

Answers


  1. 0

    Try something like this:

    import "./App.css";
import { useState} from "react";

function App() {
  const [color, setColor] = useState({
    color1: "#fff",
  });

  const handleChange = (e) => {
    setColor({ ...color, color1:  e.target.value });
  };

  return (
    <>
      <div className="box--control">
        <div className="big--leftBox">
          left box
          <div
            className="left--innerTopBox"
            style={{ backgroundColor: color.color1 }}
          >
            color here
          </div>
          <div className="left--innerBottomBox">code here</div>
        </div>

        <div className="big--rightBox">
          right box
          <div className="inputs">
            Color 1
            <input
              type="color"
              style={{ marginLeft: 10 }}
              value={color.color1}
              onChange={handleChange}
            />
          </div>
          <div className="inputs">
            Color 2<input type="color" style={{ marginLeft: 10 }} />
          </div>
        </div>
      </div>
    </>
  );
}

export default App;
    Login or Signup to reply.
  2. 0

    A <div> has no value:

    <div className="left--innerTopBox" value={color.color1}>

    Presumably you meant to use a style?:

    <div className="left--innerTopBox" style={{ color: color.color1 }}>

    Then all you need to do is update the state value to whatever you want. For example:

    <input
  type="color"
  style={{ marginLeft: 10 }}
  onChange={e => setColor({ color1: e.target.value })}
/>

    This can be abstracted into its own function, for example:

    const handleChange = e => setColor({ color1: e.target.value });

    and:

    <input
  type="color"
  style={{ marginLeft: 10 }}
  onChange={handleChange}
/>

    Note also that this over-writes the entirety of the state. If you end up with multiple properties in that state object, you can preserve them and update only one:

    const handleChange = e => setColor({ ...color, color1: e.target.value });

    Of course this also hard-codes the property name. You can make that dynamic by giving the input a name:

    <input
  type="color"
  name="color1"
  style={{ marginLeft: 10 }}
  onChange={handleChange}
/>

    And using that name in the function:

    const handleChange = e => setColor({ ...color, [e.target.name]: e.target.value });

    Which would allow you to re-use the same change handler for multiple inputs that set different properties on the same state object.

    Note of course that this will update it on every change. So for example if you type "green" then there will 5 "color" updates:

    • { color1: 'g' }
    • { color1: 'gr' }
    • { color1: 'gre' }
    • { color1: 'gree' }
    • { color1: 'green' }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search