I have a functional React ponent that needs to be rerendered after I change a slider's position. Since I am using Redux to handle my states, I shouldn't need to use React's because to me it would be a bit of a hacky way to fix my problem. Is there an actual way to rerender said ponent onChange without converting my ponent to a classical one?

import React from "react";
import { Radio, RadioGroup } from "@material-ui/core";
import Slider from "@material-ui/lab/Slider";

const consoleLog = e => {
  console.log(e.target.name, ": ", e.target.value);
};

const handleData = question => {
  switch (question.type) {
    case "fv":
      return (
        <p
          className="range-field"
          style={{ width: 25 + "%", margin: 25 + "px" }}
        >
          <Slider
            value={25}
            min={question.min}
            max={question.max}
            onChange={consoleLog}
          />
        </p>
      );
  }
};

const Answers = props => {
  return <div>{handleData(props.data)} </div>;
};

export default Answers;

I have a functional React ponent that needs to be rerendered after I change a slider's position. Since I am using Redux to handle my states, I shouldn't need to use React's because to me it would be a bit of a hacky way to fix my problem. Is there an actual way to rerender said ponent onChange without converting my ponent to a classical one?

import React from "react";
import { Radio, RadioGroup } from "@material-ui/core";
import Slider from "@material-ui/lab/Slider";

const consoleLog = e => {
  console.log(e.target.name, ": ", e.target.value);
};

const handleData = question => {
  switch (question.type) {
    case "fv":
      return (
        <p
          className="range-field"
          style={{ width: 25 + "%", margin: 25 + "px" }}
        >
          <Slider
            value={25}
            min={question.min}
            max={question.max}
            onChange={consoleLog}
          />
        </p>
      );
  }
};

const Answers = props => {
  return <div>{handleData(props.data)} </div>;
};

export default Answers;

• javascript
• reactjs
• react-redux

• Your ponent is not connect to Redux. So, it will not update if the redux state changes... – luissmg Commented Feb 19, 2019 at 11:21
• The ponent will re-render when either the state changes or it receives new props. – apokryfos Commented Feb 19, 2019 at 11:26
• I actually took out the part where it dispatches, so let's say it does. – AtEchoOff Commented Feb 19, 2019 at 11:26
• 5 you can use react hooks reactjs/docs/hooks-intro.html – Sujit.Warrier Commented Feb 19, 2019 at 11:27

3 Answers 3

Slider position is actually a state. UI ponent (Slider) is stateless and expect that parent ponent (Answers) handles its state with unidirectional data flow.

In case it's preferable to save UI state in global state, Redux can be used to handle slider state.

Otherwise local state should be used. A ponent can be converted to a ponent to use setState, it's not hacky to use it because this is actually a state. Or functional ponents can use React 16.8 hooks:

const Answers = props => {
    const [slide, setSlide] = useState(25);
    const onChange = useCallback(e => setSlide(e.value), []);
    const handleData = question => {
      switch (question.type) {
        case "fv":
          return (
            <p
              className="range-field"
              style={{ width: 25 + "%", margin: 25 + "px" }}
            >
              <Slider
                value={slide}
                min={question.min}
                max={question.max}
                onChange={onChange}
              />
            </p>
          );
      }
    };

    return <div>{handleData(props.data)} </div>;
};

Where useState preserves slider state between ponent renders, useCallback prevents unnecessary Slider rerenders.

you can use forceUpdate method to force a rerender.

Documentation: https://facebook.github.io/react/docs/ponent-api.html

Figured it out! So I use React hooks but since I'm using material-ui, I found out the value gets passed alongside the event. So using the code provided by estus, I added value as an extra parameter on the onChange function so I can get my value.

const Answers = props => {
const [slide, setSlide] = useState(props.data.min);
const onChange = useCallback((e, value) => setSlide(value), []);
const handleData = question => {
  switch (question.type) {
    case "fv":
      return (
        <p
          className="range-field"
          style={{ width: 25 + "%", margin: 25 + "px" }}
        >
          <Slider
            value={slide}
            min={question.min}
            max={question.max}
            onChange={onChange}
          />
        </p>
      );
  }
};

return <div>{handleData(props.data)} </div>;
};