question-mark
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.

selectedItem retains control when an `onChange()` sets it manually

See original GitHub issue
<Carousel autoPlay={true} 
            interval={10000}
             showThumbs={false}
              infiniteLoop={true}
              showStatus={false}
              onChange={()=>this.setState({changed:!this.state.changed})}
              dynamicHeight={true}
             >

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:33 (9 by maintainers)

github_iconTop GitHub Comments

19reactions
qruzzcommented, May 16, 2018

I was having the same issue, but there is actually a fairly simple workaround … According to the docs, the Carousel component has a selectedItem prop, that takes an Number for the index of the item selected in the image sequence.

That means, that if you initialise your components state with the the item to select, and in the onChange prop set the state to the next selected item, it will still perform the transition.

See code example for clarification:

constructor(props) {
	super(props);

	this.state = {
		selectedItem: 0,
	};
}

renderHeroContainer = () => {
	return (
		<div className="carousel-container">
			<Carousel
				autoPlay
				className="carousel"
				infiniteLoop={true}
				selectedItem={this.state.selectedItem}
				transitionTime={400}
				onChange={(e) => {
					this.setState({
						selectedItem: e,
					});
				}}>
				{this.renderItems()}
			</Carousel>
		</div>
	);
}
8reactions
dschinkelcommented, Jan 6, 2018

@leandrowd this is annoying you should show examples and provide basic changing of selected item handler code. People at least just want some default basic stuff to work out of the box like clicking the arrow to the next item.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Getting value of select (dropdown) before change
Lets say currently option My is selected now when I change it to stack in the onchange event (i.e. when I changed it...
Read more >
Set Control Value/Text OnChange - Power Platform Community
Text in the onChange property of the next box. I'm not certain that the onChange event will be fired if you set the...
Read more >
Power Apps Combo Box DefaultSelectedItems - YouTube
It is no secret that the Combo box is a grumpy control. So in this video I break down how to make it...
Read more >
blazor dropdown onchange
As an alternative to setting an onchange event, you could just bind the ... 60+ controls by Ra…. , multiselect) and this name...
Read more >
Power Apps combo box default value - EnjoySharePoint
There is another way to set the text value as the default selected item within the Power Apps combo box control. Here, we...
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 Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found