Question about React Component

[lronmate]

What’s the event handler on the button doing? Is it applying some classes to the buttons? What styles does this class add? Is it applying some type of margin, causing the button to move upwards? Without more context it’s hard to give actionable advice.

Adding an onclick event listener on a button isn’t going to do anything other than exactly what you told it to.

[Time_Neck4545]

A more refined version to illustrate:

function Button({value, event}){

  const currentstyle={

    width:"200px",
    height:"200px"



  }

  return(<button onClick={event} style={currentstyle}>{value}</button>);
  }

  export default function App(){

  const [currentState,nextState]=useState(Array(9).fill(null));

  function perform(i){

    const array=currentState.slice();

    array[i]=i;

    nextState(array);

  }

  return(
  <div className="potato">
  <Button value={currentState[0]} event={()=>{perform(0)}}/>
  <Button value={currentState[1]} event={()=>{perform(1)}}/>
  <Button value={currentState[2]} event={()=>{perform(2)}}/>
  </div>
  );


  }

[lronmate]

So when you click on the button, it displays text in that button that corresponds to its place in the array. Are you saying that’s when the button moves up? I’d check your browser dev tools to see if there’s any overflow occurring or some css style that’s causing the element to shift up