How do I handle onChange events within an internal Component-CodePudding

I have a simple slider that is not working when it is placed inside a Component. It works fine when it is outside the component.

In the following code I have a simple block of JSX. When I render the block as JSX it works perfectly. When I render the same block from inside a functional Component, the slider moves once, registers the proper state change, and then stops after the first onChange event.

I have a good bit of code written as plain functions. I am trying to use useSwipeable (for touch support), which is a hook and must be called from within a Component (according to the error message I get).

Could anyone help me understand why the Componentized block doesn't work?

Code is also available at CodeSandbox

Thanks, Bill

import "./styles.css";
import { useEffect, useState } from "react";

export default function App() {
  const [valueS, setValueS] = useState(67);

  // useEffect(() => {}, [valueS]);

  const testBlock = (
    <div>
      <h2>{valueS}</h2>
      <input
        type="range"
        value={valueS}
        {...{
          onChange: (e) => setValueS(e.target.value),
          onm ouseUp: () => console.log("slide complete by mouse")
        }}
      />
    </div>
  );

  function TestComponent() {
    return testBlock;
  }

  function testFunction() {
    return testBlock;
  }

  return (
    <div style={{ textAlign: "center" }}>
      <h1>COMPONENT/FUNCTION EVENTS</h1>
      <TestComponent />
      {testFunction()}
    </div>
  );
}

CodePudding user response：

Your implementation is not correct. You are creating a component inside a component which is okay but in the same time you are trying to update state of main component with <TestComponent/>. Correct implementation is the second way that you do as {testFunction()}. If you want to keep your component like this, you should create a state inside TestComponent but best practice would be creating another file for TestComponent and putting state inside of it. I updated your code to make it work, here is the working sample https://codesandbox.io/embed/component-function-events-forked-m5wj4b?fontsize=14&hidenavigation=1&theme=dark

import "./styles.css";
import { useEffect, useState } from "react";

export default function App() {
  const [valueS, setValueS] = useState(67);

  // useEffect(() => {}, [valueS]);

  const testBlock = (
    <div>
      <h2>{valueS}</h2>
      <input
        type="range"
        value={valueS}
        onChange={(e) => {
          setValueS(e.target.value);
        }}
      />
    </div>
  );

  function TestComponent() {
    const [valueS1, setValueS1] = useState(67);
    return (
      <div>
        <h2>{valueS1}</h2>
        <input
          type="range"
          value={valueS1}
          onChange={(e) => {
            setValueS1(e.target.value);
          }}
        />
      </div>
    );
  }

  function testFunction() {
    return testBlock;
  }

  return (
    <div style={{ textAlign: "center" }}>
      <h1>COMPONENT/FUNCTION EVENTS</h1>
      <TestComponent />
      {testFunction()}
    </div>
  );
}