CODEWITHSUNDEEP
javascriptreactjsstylesjsxinline-styles
Bilal Saeed
Bilal Saeed

Reputation: 116

JSX conditional inline styling doesn't work

I was trying to apply a conditional styling to textarea element. Its based on when a user clicks on a textarea its styles need to change accordingly. So I am maintaining a state of textarea using a boolean variable whom value changes when user clicks, in my style attribute I am trying to apply a style based on value of this boolean variable. 

class InputContainer extends Component {
    let {name,type} = this.props;
    let clicked = false;
    let styles = {
      basic: {
       border: "5px solid blue";
      },
      clicked: {
        border: "2px solid green";
      }
    };
    function populateField() {
       switch(type) {
            case "textBox":
              return (
                <div>

                  <textarea rows="5" name={name} style={Object.assign({}, styles.basic, clicked && styles.clicked)} onClick={()=>{clicked=true;}}>
                  </textarea>
                </div>
              )
              break;
    }


    render() {
       return({populateFields})
    }

    }
    export default InputContainer;

styles.basic are getting applied successfully however styles.clicked aren't even if I click on textarea. This code doesn't work I needed to use className attribute with css instead.

Upvotes: 1

Views: 1573

Answers (3)

Liren Yeo
Liren Yeo

Reputation: 3451

I helped you rewrite the entire code using the proper react way:

import React, { Component } from 'react'

class InputContainer extends Component {
  state = {
    clicked: false
  }

  handleClick = e => {
    this.setState({clicked: true})
  }

  populateField = () => {
    let {name, type} = this.props
    let {clicked} = this.state

    switch (type) {
      case "textBox":
        return (
          <div>
            <textarea
              rows="5"
              name={name}
              style={Object.assign({}, styles.basic, clicked && styles.clicked)}
              onClick={this.handleClick}
            />
          </div>
        )
        break;
    }
  }

  render() {
    return this.populateField()
  }
}

const styles = {
  basic: {
    border: "5px solid blue",
  },
  clicked: {
    border: "2px solid green",
  }
}

export default InputContainer

The reason to why nothing happened after clicking on the textarea was because you're not using the component states to handle clicked variable.

It's very important to understand that render() function is called whenever there is a state change.

So you should make clicked a state, and use this.setState() to change it. When the clicked state has changed, populateField() will be executed again, but this time styles.clicked will be applied.

Upvotes: 0

Hemadri Dasari
Hemadri Dasari

Reputation: 33974

Try below updated and formatted code. Here I took one state variable i.e., border and passing that as border to style prop. By default the state border has "5px solid blue" and When onClick fires on textarea I am setting a new border style. as simple as that. 

class InputContainer extends Component {
  constructor(props){
    super(props)
    this.state = {
      border: "5px solid blue"
    }
    this.onClick = this.onClick.bind(this);
  }

  onClick(){
    this.setState({
      border: "2px solid green"
    })
  }
  let {name,type} = this.props;
    function populateField() {
       switch(type) {
          case "textBox":
            return (
              <div>
                <textarea rows="5" name={name} style={{border: this.state.border}} onClick={this.onClick}>
                </textarea>
              </div>
            )
            break;
        }

    render() {  
       return(
          {populateFields}
       )
    }

    }
    export default InputContainer;

Upvotes: 1

Mikkel
Mikkel

Reputation: 7777

React inline styles are different from CSS, for example

basic: { border: 5px solid blue; }

Should be quoted like this:

basic: { border: "5px solid blue" }

Upvotes: 0

Related Questions