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


Related Query

More Query from same tag