Menu
I'm using react and I'm trying to display this error message if this.state.message === 'failed'. But I'm really not sure why this ternary operation isn't working. What am I doing wrong here?
render() { ... <div className="row"> return (this.state.message === 'failed') ? ( =>{" "} { <div className="alert alert-danger" role="alert"> Something went wrong </div> } )() : false; } </div> } Right now its just displaying return (this.state.message === 'failed') ? ( => in the html
816
Use Ternary Operators in JSX JSX is the default templating language for building React applications. You can use curly braces inside JSX and write valid JavaScript expressions between them, including a ternary operator. You can use the ternary operator to configure dynamic classes in React.
JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.
The ternary operator, also called the conditional operator, is an alternative to the if...else statement. This operator has three parameters: A condition followed by ? (question mark) The expression to execute if the condition is true.
There're several ways to convert HTML Strings to JSX with React. One way is to put the string in between curly braces in our component. Another way is to put the string in an array with other strings or JSX code. Finally, we can use the dangerouslySetInnerHTML prop render an HTML string as HTML in our component.
I currently like to format my ternaries like this in react:
render () { return ( <div className="row"> { //Check if message failed (this.state.message === 'failed') ? <div> Something went wrong </div> : <div> Everything in the world is fine </div> } </div> ); } You are correct that IIFEs can be used within a render statement as well as ternary expressions. Using a normal if .. else statement is valid, but the render function's return statement can only contain expressions so you would have to do those elsewhere..
93
The syntax for ternary is condition ? if : else. To be safe, you can always wrap the entire ternary statement inside parenthesis. JSX elements are also wrapped in parenthesis. The fat arrow in an arrow function is always preceeded by two parenthesis (for the arguments) - but you don't need any functions here anyway. So given all of that, there are a couple of syntax errors in your code. Here's a working solution:
render() { return (this.state.message === 'failed' ? ( <div className="alert alert-danger" role="alert"> Something went wrong </div> ) : null); } Edit: if this is inside other markup, then you don't need to call render again. You can just use curly braces for interpolation.
render() { return ( <div className="row"> {this.state.message === 'failed' ? ( <div className="alert alert-danger" role="alert"> Something went wrong </div> ) : null} </div> ); } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
