React - Change Inline CSS Conditionally Based on Component State

JavaScript
1

Tell us what’s happening:

I need help, I don’t know why it’s not working because my code is right???

They give me X for this: The input tag should be styled with a border of 3px solid red if the input value in state is longer than 15 characters.

My code so far

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
    const char = 15;
    this.state.input > char? this.setState({inputStyle:'3px solid red'}) : inputStyle
    
    // 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>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/change-inline-css-conditionally-based-on-component-state

Regards,
Ali Mosaad

1 Like
2

There are a few issues with your code:

  • this.state.input is a string, so this.state.input > char is not quite the comparison that you want to do
  • The input's style is being set with the inputStyle object defined inside the render method, so calling this.setState({inputStyle: '3px solid red' }) won’t do anything to the style of the input because input doesn’t get its styles from there
  • Following from the point above, the ternary expression is unnecessary (not least because it doesn’t actually make any sense as it is)

I hope that helps!

EDIT: corrected an incorrect assumption about coercion!

3

@honmanyau has all good point.

I just want to focus on a detail that I think is crucial in understanding a bit more how React works.

In your render which style do you think this declaration is picking up?

<input
          type="text"
          style={inputStyle}
 />

the let defined inside render

    let inputStyle = {
      border: '1px solid black'
    };

or the (eventually) newly assigned state value?

this.setState({inputStyle:'3px solid red'})
1 Like
4

Hi @honmanyau,

Thank you for your replying, i try to fix it but still same problem.

Here is my new code:

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

Please insert answer if you know it, so, i can learn from it, not pinned in the same example for 1 hour and more.

Thank you for replaying again.

Regards,
Ali Mosaad

5

Hi All,

Any one help, I am stuck here, any help please!!!, I am in the same challenge with more than 2 hour.

Why slowly replaying, any one help, I am stuck, i need the explanation with solution, not explanation only, so, i will stucking more and more.

What i wrote:

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

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/change-inline-css-conditionally-based-on-component-state

Regards,
Ali Mosaad

6

We are volunteers and we have own things to do, too. :thinking:

Um, no.

Just giving you the solution is pointless and will only lead to more and bigger trouble for both you and everyone trying to help. Most people are interested in helping others to learn here, not helping others to copypasta.

As for the last code snippet you posted, you still haven’t fixed the points that I mentioned. Consider this:

console.log(this.state.input); // "nyanpasu"

const char = 15;

if (this.state.input > char) {
  // Here you are saying if the string "nyanpasu" is greater than 15,
  // then do something, does that make sense to you?

  // ...
}

The additional set of curly braces is not wrong per se, but unnecessary here: {inputStyle = {border:'3px solid red'}}. What you are writing inside the render() method and **before the return keyword is just plain JavaScript, I think you are confusing those with the ones required to write JavaScript inside the JSX syntax (for example: <div>{42 > 4.2 ? '42' : '4.2'}</div>).

7

Hi @honmanyau,

Thank you very much for replaying, I arrived to the answer.

Here is the answer, if any one stuck:

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

Good luck for every one.

Regards,
Ali Mosaad

2 Likes
8

Hi! Another way:

const maxChar = 15;
this.state.input.length > maxChar && (inputStyle = {border:“3px solid red”})

1 Like
9

I just did:

  this.state.input.length>15?
  inputStyle= {border:'3px solid red'}
  :inputStyle
10

This is a school example, to better understanding:

    let inputStyle = {
      border: '1px solid black'
    };
    // change code below this line
      let moreThan15 = {
        border: '3px solid red'
      }
      let size = this.state.input.length;

      let valueStyle = inputStyle;

      size > 15 ? valueStyle=moreThan15 : valueStyle=inputStyle;
11

let inputStyle = {
border: this.state.input.length>15 ? ‘3px solid red’ : ‘1px solid black’
};

this works for me !