How to change the style of an element in React?

Question

I'm very new to Reactjs, and I have an td in my render method:

<td style={{cursor: 'pointer'}} onClick={} key={i}>

On click of this td, I want to change its style, how one should do this in react js?

Thanks.

Edited:

This is how I have generated by td:

{this.props.posts.map((service, i) =>
     <tr>
        <td style={{cursor: 'pointer'}} key={i}>
           <span> {posts.createdBy} </span>
        </td>
     </tr>
)}

Answer 1

Supposing of course that all the other ducks are in order, you can keep track of the class in the components state, and then update the state with logic in the onClick event.

var TableData = React.createClass({
  getInitialState: function() {
    return {
      class: 'pointer'
    };
  },
  changeStyle: function(e) {
    if (this.state.class === 'pointer') {
      this.setState({class: 'not pointer'});
    } else {
      this.setState({class: 'pointer'});
    }
  },
  render: function() {
    return (
      <td style={ cursor: {this.state.class} }
          onClick={this.changeStyle}
          key={i}>
      </td>
    );
  }
});

Answer 2

For modern react:

You can change values from state

import { useState } from 'react';

const App = () => {

  const [ color, setColor ] = useState('#fff');
  const [ backgroundColor, setBackgroundColor ] = useState('#f44');

  return (
    <p style={{ 'color': color, 'backgroundColor': backgroundColor }} >
      Hello world
    </p>
  );
};

export default App;

Or you can toggle between two values

import { useState } from 'react';

const App = () => {

  const [ isFullWidth, setIsFullWidth ] = useState(false);

  return (
    <p style={{'width':` ${isFullWidth ? '100%' : '20%'}`}} >
      Hello world
    </p>
  );
};

export default App;

Answer 3

You can actually do this programmatically using React.createRef then use a function to change the element using referencedElement.style.someStyle = style.

Answer 4

Don't use the inline styles, inline styles are too expensive. Use default .css.

table.css : Maintain two classes

.td {cursor: 'pointer'}

.td-clicked {
 //your classAtributes
}

index.js: Maintain the unique key for each td. If the user clicked the one td use the onClick listener to change the class of that particular td.

import React, { useState } from "react";
import './table.css';
const Table = () => {
  const [clickTd, setClickedTd] = useState(null);
  return (
    <>
      {this.props.posts.map((service, i) => {
        return (
          <tr>
            <td
              className={clickId == i ? "td-clicked" : "id"}
              key={i}
              onClick={() => setClickId(i)}
            >
              <span> {posts.createdBy} </span>
            </td>
          </tr>
        );
      })}
      )}
    </>
  );
};

Answer 5

You can easily inject the inline style updated state or any CSS object representative.

Combine it with with static CSS class (ClassName in the expamle).

    constructor(props) {
    super(props);
    this.filters = {filter: 'blur(5px)'};
    this.state = {
        filters: {filter: 'blur(5px)'}
    };
}

CSS object injected with any trigger you choose:

<img src="/static/back.jpg" className={'background'} style={this.filters}></img>

Or with updated state triggered with setState():

<img src="/static/back.jpg" className={'background'} style={this.state.filters}></img

Answer 6

@karthick krishna .I create a demo according to your question. td will be selected on user clicks the date column of Post List.

class PostList extends React.Component {
  constructor() {
    super();
    this.state = { selectedPost: {} };
  }
  render() {
    return (
      <table>
        {this.props.posts.map(post => (
          <tr key={post.id}>
            <td>{post.title}</td>
            <td
              className={
                this.state.selectedPost.id === post.id ? "selected" : ""
              }
              onClick={this.selectPost.bind(this, post)}
              style={{ cursor: "pointer" }}
            >
              <span>{post.createdBy}</span>
            </td>
          </tr>
        ))}
      </table>
    );
  }

  selectPost(selected) {
    if (selected.id !== this.state.selectedPost.id) {
      this.setState({ selectedPost: selected });
    } else {
      this.setState({ selectedPost: {} });
    }
  }
}

const postData = [
  { id: "1", title: "jQuery is great", createdBy: "2019-01-15" },
  { id: "2", title: "ES6 is cool", createdBy: "2019-02-15" },
  { id: "3", title: "Vuejs is awesome", createdBy: "2019-03-15" }
];
const element = (
  <div>
    <h1>Post List</h1>
    <PostList posts={postData} />
  </div>
);
ReactDOM.render(element, document.getElementById("root"));

.selected {
  background-color: rgba(217, 83, 79, 0.8);
}

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

<div id="root"></div>