how to change the react component css class value-CodePudding

Here is my App.js

import './App.css';
import './scripts/logic.js';
import Player from './components/Player'
import { useState } from 'react'
function App() {

  const [cordinate,setCordinate] = useState({x:"",y:""})

  function moveRight(){
    
  }
  return (
    <div className="App">
      <div className="container">
          <div className="board" id="board">
              <Player/>
          </div>
          <button>Move Right</button>
      </div>
    </div>
  );
}

export default App;

my css file where the player css is defined

.player{
    background-color: red;
    grid-row-start: 5;
    grid-column-start:5;
}

Here what i want now by using the moveRight function i want to manipulate the value of player class grid-row-start and grid-column-start how can i achive this

CodePudding user response：

You can use inline styling and pass your variables directly

<div className="container" style={{gridRowStart: cordinate.x, gridRowEnd: cordinate.y}}>

Please keep in mind that in your case you will need to pass cordinates down to Player component as a props and then use inline styling accordingly

CodePudding user response：

you can use styledcomponent for this situation

but you can do it in your js file too you should use inline style on the jsx tag like this

const [cordinate,setCordinate] = useState({x:"",y:""})


 function moveRight(){
    // change your state over here
  }

const tagStyle = {
    gridRowStart: cordinate.x,
    gridColumnStart: cordinate.y ,

}
<tag style={tagStyle}>
...
</tag>