how to change the react component css class value

Question

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

how can i use that i mean even if i user that how will i manipulate it using code — sarangkkl
– sarangkkl, Commented Mar 27, 2022 at 7:59

Damian Busz · Accepted Answer · 2022-03-27 08:01:17Z

2

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

answered Mar 27, 2022 at 8:01

Damian Busz

1,8581 gold badge13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sarangkkl Over a year ago

i need to pass the style in the player component when i pass the style in my player component it does not render anything no style appear

Damian Busz Over a year ago

You need to pass cordinates as a prop to Player component and inside player apply inline style to div element or any html element you contain everything, really

Eisa Rezaei · Accepted Answer · 2022-03-27 08:02:10Z

2

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>

answered Mar 27, 2022 at 8:02

Eisa Rezaei

5932 silver badges14 bronze badges

Collectives™ on Stack Overflow

how to change the react component css class value

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related