React - Changer le CSS en ligne de manière conditionnelle en fonction de l'état du composant

Si vous rencontrez des problèmes avec le défi Change Inline CSS Conditionally Based on Component State de freeCodeCamp, vous n'êtes probablement pas seul.

Dans ce défi, vous devez ajouter du code pour modifier certains CSS en ligne de manière conditionnelle en fonction de l'état d'un composant React.

Lorsque vous lancez le défi pour la première fois, voici le code que vous verrez:

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 // change code above this line return ( 

Don't Type Too Much:

); } };

Notez qu'un objet de style en ligne,, inputStylea déjà été déclaré avec un style par défaut.

Votre objectif dans ce défi est de mettre à jour de inputStylesorte que la bordure de l'entrée soit 3px solid redquand il y a plus de 15 caractères dans l'entrée. Notez que le texte de la zone de saisie est enregistré dans l'état du composant sous input:

... this.state = { input: '' }; ...

Proche, mais pas tout à fait

Imaginez qu'après avoir lu la description et les instructions, vous venez avec ceci:

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; if(this.state.input > char) { inputStyle = { border:'3px solid red' } } // change code above this line return ( 

Don't Type Too Much:

); } };

Mais lorsque vous essayez de soumettre cela, cela ne passe pas tous les tests. Regardons de plus près ce qui se passe.

Solutions

Utiliser une ifdéclaration

Déclarer, charc'est bien, mais regardez de plus près la ifcondition:

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

N'oubliez pas que this.state.inputc'est la valeur de la zone de saisie et c'est une chaîne. Par exemple, il pourrait s'agir de "tests de test 1, 2, 3".

Si vous saisissez "testing testing 1, 2, 3" dans la zone de texte et lot this.state.inputdans la console:

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; console.log(this.state.input); if(this.state.input > char) { inputStyle = { border:'3px solid red' } } // change code above this line return ( 

Don't Type Too Much:

); } };

Vous verrez testing testing 1, 2, 3dans la console.

De plus, si vous vous connectez this.state.input > charà la console, vous verrez qu'elle évalue false:

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; console.log(this.state.input > char); if(this.state.input > char) { inputStyle = { border:'3px solid red' } } // change code above this line return ( 

Don't Type Too Much:

); } };

En termes simples, vous ne pouvez pas comparer this.state.inputdirectement une chaîne ( ) à char, qui est un nombre.

Au lieu de cela, appelez .lengthon this.state.inputpour obtenir la longueur de la chaîne et comparez-la à count:

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; if(this.state.input.length > char) { inputStyle = { border:'3px solid red' } } // change code above this line return ( 

Don't Type Too Much:

); } };

Étant donné que la longueur de la chaîne "testing testing 1, 2, 3" est de 23 caractères (y compris les espaces et les virgules), la bordure de la zone de saisie deviendra rouge:

Utilisation d'un opérateur ternaire

Un opérateur ternaire ou conditionnel est comme une if...elseinstruction d' une ligne et peut vous aider à raccourcir votre code de manière significative.

Revenez à votre solution et supprimez tout sauf la charvariable:

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 // change code above this line return ( 

Don't Type Too Much:

); } };

Maintenant, prenez la condition que vous avez utilisée dans votre ifdéclaration précédente et utilisez-la comme première partie de la condition ternaire:this.state.input.length > char ?  :  ;

Everything between ? and : indicates what happens if the earlier statement is true. You can just copy the code that was inside your if statement before: this.state.input.length > char ? inputStyle = { border:'3px solid red' } :  ;

Now you need to handle the else portion of the ternary operator, which is everything between : and ;.

While you didn't use an else statement in your first solution, you effectively used inputStyle as-is. So just use inputStyle the way it's declared earlier in your code: this.state.input.length > char ? inputStyle = { border:'3px solid red' } : inputStyle;

Your whole solution should look like this:

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.length > char ? inputStyle = { border:'3px solid red' } : inputStyle; // change code above this line return ( 

Don't Type Too Much:

); } };

And that's it – you should be able to pass the challenge! Now go forth and conditionally style React components to your heart's content.