freeCodeCamp/index.md at a3fd1aa2843dff82efda56ab4e783ad38a5f90ae

Files

Randell Dawson 0a1eeea424 fix(guide) Replace invalid prism code block names (#35961 )

* fix: replace sh with shell

fix replace terminal with shell

fix replace node with js

fix replace output with shell

fix replace cs with csharp

fix replace c++ with cpp

fix replace c# with csharp

fix replace javasctipt with js

fix replace syntax  with js

fix replace unix with shell

fix replace linux with shell

fix replace java 8 with java

fix replace swift4 with swift

fix replace react.js with jsx

fix replace javascriot with js

fix replace javacsript with js

fix replace c++ -  with cpp

fix: corrected various typos

fix: replace Algorithm with nothing

fix: replace xaml with xml

fix: replace solidity with nothing

fix: replace c++ with cpp

fix: replace txt with shell

fix: replace code with json and css

fix: replace console with shell

2019-05-15 19:08:19 +02:00

1.7 KiB

Raw Blame History

title

title
Change Inline CSS Conditionally Based on Component State

Change Inline CSS Conditionally Based on Component State

Hint 1:

You are going to be checking the length of this.state.input so use its .length property.

this.state.input.length

Hint 2:

You are entering code before the return statement so you can use a pure JavaScript if/then statement.

Solution:

You will use an if/then statement to check the value of this.state.input.length. If it is longer than 15, assign '3px solid red' to inputStyle.border.


class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // change code below this line
    if (this.state.input.length > 15) {
      inputStyle.border = '3px solid red';
    }
    // change code above this line
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};

Solution

Write a conditional statement that is evaluated according to your state, as mentioned in the challenge description, checks the length of the input and assigns a new object to the inputStyle variable.

if (this.state.input.length > 15) {
  inputStyle = {
    border: '3px solid red'
  }
}

1.7 KiB Raw Blame History