The worm The worm - 1 year ago 111
React JSX Question

Styling an objects property using React

How do I change the style of a react component?
This will error on the background color but when removed it will output 'hello'
I want to style based on property in an object in react.

if(this.state.msg[0] == 'Rich){
background-color: red;

Answer Source

In React we use camelCase when specifying the desired CSS style names.

In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name

Here is a demo of how you could conditionally apply styles depending on the values kept in the state:

class App extends React.Component {
  constructor() {
    this.state = {
      msg: [
        {msg: {author: {name: 'Rich'}}},
        {msg: {author: {name: 'John'}}},
        {msg: {author: {name: 'Pete'}}}

  render() {

    const style1 = {
      backgroundColor: 'red'

    const style2 = {
      backgroundColor: 'blue'

    const style3 = {
      backgroundColor: 'gray'

    const getStyleName = (name) => {
      switch (name) {
        case 'Rich':
          return style1;
        case 'John':
          return style2;
          return style3;

    const renderNames =, index) => {
      return (
        <p key={index} style={getStyleName(}>

    return (

  <App />,
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download