Shift objects when even is triggered in React (Carousel with differing widths)

Question

I have a bunch of objects that I want to shift when an event is triggered.
If the event is triggered, all objects should slide to the left until the next object, to the right of the previous object in the middle, is the next object in the middle.
If the button is clicked multiple times the transition will be executed every single time without delay or interruption of the previous transitions, caused by previous events.

So my two questions are:

How can I implement this event handler in react?
How would the css look in order for this to work correctly?

const myBoxes = [
{width: 10, color: "red"},
{width: 20, color: "blue"},
{width: 50, color: "yellow"},
{width: 30, color: "green"},
{width: 40, color: "black"}
]

const Boxes = () => {
  const shiftBoxes = (e) => {
     //I dont know how to implement this
  }
  return (
    <div>
    <button onClick={shiftBoxes}>Click Me to Shift Boxes to the left by one Box</button>
    <div className="box-wrapper">
        {myBoxes.map((box) => (
          <span style={{  
          backgroundColor: box.color,
          width:`${box.width}px`
          }}> </span>
        ))}
    </div>
    </div>
  );
};

ReactDOM.render(
<Boxes/>, document.body)

button {
margin: 10px 0px;}

.box-wrapper {
border: 2px solid black; 
width: 100%;
height: 60px;
display: flex;
align-content: center;
justify-content: space-between;
}

span {
padding: 20px;
margin: 10px;
border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

score 0 · Answer 1 · answered Aug 22 '20 at 15:06

Use React State to accomplish this by either transforming this component to class based component or use Hooks useState().
Using changeCSS as variable, initialise the state and set it to default as false.
 
    
shiftBoxes(){
     this.setState({changeCSS: true});
  }
return (
    <div>
    <button onClick={shiftBoxes()}>Click Me to Shift Boxes to the left by one Box</button>
    <div className="box-wrapper">
        {myBoxes.map((box) => (
          <span style={this.changeCSS(box)}> </span>
        ))}
    </div>
    </div>
  );
changeCSS(box:any){
if(this.state.changeCSS){
  backgroundColor: box.color,
  width:`${box.width}px`
  margin-left:-10%;
} else {
backgroundColor: box.color,
  width:`${box.width}px`enter code here`
}

wouldnt `margin-left:-10%` just decrement the margin by a fixed amount, which doesnt depend on the width of the current element? — Tobi, Aug 22 '20 at 15:24
Can you add the design? How do you want your boxes to be aligned? — Afrin Athar, Aug 23 '20 at 15:05

Shift objects when even is triggered in React (Carousel with differing widths)

So my two questions are:

1 Answers1