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
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
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>