"clickToChange" prop used with "value" generates error

Describe the bug “clickToChange” prop used with “value” generates error

To Reproduce Steps to reproduce the behavior: I reproduced it here https://codesandbox.io/s/react-playground-ijunv

Expected behavior When I click on the slide the current slide becomes active and the value is updated

Actual behavior When I click on a lide to make it current I get “e.props.onChange is not a function” error

Environment

• please paste the result of npx @brainhubeu/envinfo@latest --preset brainhubeu System: OS: Windows 10 10.0.18363 CPU: (8) x64 Intel® Core™ i5-8265U CPU @ 1.60GHz Memory: 1006.50 MB / 7.85 GB Binaries: Node: 12.16.2 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.14.4 - D:\4linee\combo\node_modules.bin\npm.CMD Browsers: Edge: 44.18362.449.0 Internet Explorer: 11.0.18362.1
• desktop
• Browser Chrome

---

IssueHunt Summary

Backers (Total: $0.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

[mcmxcdev]

@piotr-s-brainhub I will try to be more clear: e.props.onChange is not a function error occurs when user set value prop, BUT forgot to provide a custom onChange function as prop which is necessary for a controlled component.

I adapted the initial codebox example from the issue author and only added onChange={setCurrentSlide} to <Carousel /> and it all works then.

I think the only way you can help the user here is to either emit a console.warn or throw new Error so the user knows what he did wrong, in this case A controlled component needs onChange to work correctly!

[mcmxcdev]

Here is a working example in codesandbox: https://codesandbox.io/s/react-playground-lmxv0

The problem at hand is, that when value prop is set by user, isControlled is true, therefore looking for onChange prop which the user might forgot, leading to the onChange is not a function error.

Like can be seen in the example below, I would suggest to either console.warn the user or more strict, let him run into a throw new Error.

@piotr-s-brainhub What is the expected behavior supposed to be?

  render() {
    const { value, onChange, ...rest } = this.props;
    const isControlled = !isNil(value);

    if (isControlled && !onChange) {
      console.warn('A controlled component needs onChange to work correctly!');
      throw new Error('A controlled component needs onChange to work correctly!');
    }

    return (
      <Carousel
        value={isControlled ? parseInt(value) : this.state.value}
        onChange={isControlled ? onChange : this.onChange(onChange)}
        {...rest}
      />
    );
  }