score:1
Accepted answer
you may simply store within component's local state the string you wish to move, the number of available 'slots' and current position of the string.
then, simply use onclick
event handler to increase current position:
const { render } = reactdom
class demo extends react.component {
constructor(props) {
super(props)
this.clickhandler = this.clickhandler.bind(this)
this.state = {currentposition: 0, totallength: 3, val: 'yolo'}
}
clickhandler(){
this.setstate({currentposition: (this.state.currentposition + 1)%this.state.totallength})
}
render() {
return (
<div>
<button onclick={this.clickhandler} >move to the right</button>
{
array.from(
{length: this.state.totallength},
(_,i) => (
<div key={i} classname="slot">
<p>{i == this.state.currentposition ? this.state.val : null}</p>
</div>
)
)
}
</div>
)}
}
render (<demo />, document.getelementbyid('root'))
.slot{display:inline-block;vertical-align:top;text-align:center;margin-top:30px;margin-left:10px;width:50px;height:50px;background-color:grey;color:white;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>
score:1
here's a working sandbox with the thing i believe you want to achieve: https://codesandbox.io/s/immutable-water-xy0n8
Source: stackoverflow.com
Related Query
- Click and move items ReactJs
- On click strike off items and move those items to the bottom of the list
- Double click and click on ReactJS Component
- ReactJS - Need to click twice to set State and run function
- How to set state and props on a single click event in reactjs
- Render grid items in one row - ReactJS and Material-UI
- ReactJS and UIkit 3.6.5: click event isn't fired inside modal window
- How to rotate pseudo-element on click in ReactJS and its content is SVG
- Setting a Unique Key for my Cards so that I can click a button and delete them in ReactJS
- ReactJS - get latitude on click and show it in input
- I have a clock ticking when click start and stop made by ReactJS
- how to change color in click and remove color clicked one second click fullcalendar reactjs
- mapping items and flattening into single array in reactjs
- Call API and redirect to next page with same click ReactJS
- Close previous sub-menu and show clicked sub-menu with single click in ReactJS
- I have multiple onClick button and whenever I click 1 button all the same buttons triggers. Reactjs
- Dynamically update polyline with new map click with reactjs and leaflet
- How to display, add and delete items from JSON file using ReactJs
- Reactjs Click to move to next item in array
- How to click an element and move it to another element
- Both click() and dispatchEvent does not trigger automatic click in reactjs
- reactjs -- click button, load something from localstorage, and display it outside of a function
- Filtering API data and rendering items upon a button click
- add and remove item in array on click reactjs
- reactjs - moving list items back and forth between two components
- Hide and show the content of sibling elements on single click among them in ReactJS
- First click on Nav Menu Button Giving Error and working fine after that ReactJs
- Route to another component and page when click on an image reactjs
- add and update input value sequentially on click event in reactjs
- Reactjs useState not changing boolean state and not rendering child component on click
More Query from same tag
- React : Display an error message when clicking on the "submit" button if the user enters text
- NextJs and dynamic routes - how to handle the empty parameter scenario?
- Filter Table using Javascript ES6
- update the specific item in map loop
- Need to check if the value being submitted is greater than the current value
- How do I handle possible null values in TypeScript when I can't access the defintions
- React custom component does not accept 2 onClicks
- How to retrieve a fetch data from a JSON?
- react admin pagination is not working expected
- .Net Core 2.1 with IdentityServer4 Cookie and API JWT based authentication for the same app
- CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated
- SetTimeOut in React hook does not allow writing to input text
- LDAP Protocol and Connection in ReactJS
- Inconsistent Blinker speed in React
- Leaflet error: clearLayers is not a function
- How do I programmatically change the record inside a react-admin create component
- The correct way to unit test react component
- Save React-Bootstrap xs,sm,md,lg,xl spans/offsets into css class
- ReactJS :: How to Show Only Relevant Menu Items and Hide Other Menu Items Upon Page Change
- Is there a way to add a class to all elements that has a property set to true?
- State not updating from useEffect hook
- npm compilation error ('_' is not defined)
- Store GraphQL errors as String
- Basic CSS Positioning with Leaflet Map and HTML Table with React.js
- I can't get value with navigator.geolocation.getCurrentPosition in react
- Add opacity in react style backgroundColor using hex values?
- Please how do i handle this error "Unhandled Rejection (Type Error): Cannot read property 'filter' of undefined"
- React-redux Hooks and function component logic
- Draw a dashed path using Framer Motion in React
- Same component with different parameters is not updating in react