Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"clickToChange" prop used with "value" generates error

See original GitHub issue

Issuehunt badges

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

To Reproduce Steps to reproduce the behavior: I reproduced it here

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


  • 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!


Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:14 (9 by maintainers)

github_iconTop GitHub Comments

mcmxcdevcommented, Jul 10, 2020

@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!

mcmxcdevcommented, Jul 9, 2020

Here is a working example in codesandbox:

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, } = 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 (
        value={isControlled ? parseInt(value) : this.state.value}
        onChange={isControlled ? onChange : this.onChange(onChange)}
Read more comments on GitHub >

github_iconTop Results From Across the Web

TypeScript is not throwing errors when invalid value passed to ...
I have imported this DynPut into another component and passed the value 10 to the Column Prop but typescript is not throwing any...
Read more >
The noob's guide to useState - LogRocket Blog
This is the official method of setting a state value in an immutable manner. We use the second element, which is a function...
Read more >
Control table UI component appearance and behavior
The uitable function creates a table UI component and sets any required properties before displaying it. By changing property values of a Table...
Read more >
Introduction to events - Learn web development | MDN
You can also use JavaScript to build cross-browser add-ons — browser ... or to display an error message if a form field is...
Read more >
Introduction to Thermal Desktop
You can Shift-Right click to change the settings ... lower value makes the lines more solid. • explode ... command is used to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found